【Vue】如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程

如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程。

安装 Vuex

首先，在你的 Vue 3 项目中安装 Vuex。可以使用 npm 或 yarn：

npm install vuex@next --save
# or
yarn add vuex@next

创建 Store

在 Vue 3 中，你可以使用 createStore 函数来创建 Vuex Store。通常我们会在项目的 src 目录下创建一个 store 文件夹，并在其中创建一个 index.js 文件：

// src/store/index.jsimport { createStore } from 'vuex';const store = createStore({state() {return {count: 0};},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {doubleCount(state) {return state.count * 2;}}
});export default store;

在 Vue 应用中使用 Store

在你的 Vue 应用中，你需要将创建的 Store 实例传递给 Vue 应用。通常在 main.js 文件中进行：

// src/main.jsimport { createApp } from 'vue';
import App from './App.vue';
import store from './store';const app = createApp(App);app.use(store);app.mount('#app');

使用 State

你可以在组合式 API 中通过 useStore 函数来访问 Vuex Store：

<template><div><p>{{ count }}</p></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const count = computed(() => store.state.count);return {count};}
};
</script>

使用 Getters

同样，你可以在组合式 API 中使用 useStore 函数来访问 Vuex Getters：

<template><div><p>{{ doubleCount }}</p></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const doubleCount = computed(() => store.getters.doubleCount);return {doubleCount};}
};
</script>

提交 Mutations

你可以在组合式 API 中通过 useStore 函数来提交 Vuex Mutations：

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const count = computed(() => store.state.count);const increment = () => {store.commit('increment');};return {count,increment};}
};
</script>

分发 Actions

你可以在组合式 API 中通过 useStore 函数来分发 Vuex Actions：

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const count = computed(() => store.state.count);const increment = () => {store.dispatch('increment');};return {count,increment};}
};
</script>

模块化 Store

当应用变得非常复杂时，可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action 和 getter，甚至可以嵌套子模块：

// src/store/index.jsimport { createStore } from 'vuex';const moduleA = {state() {return {count: 0};},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {doubleCount(state) {return state.count * 2;}}
};const store = createStore({modules: {a: moduleA}
});export default store;

访问模块中的 State

在组合式 API 中，你可以通过模块名来访问模块中的 state 和其他属性：

<template><div><p>{{ count }}</p></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const count = computed(() => store.state.a.count);return {count};}
};
</script>