在 Vue 3 中使用 Vuex 进行状态管理是一个很好的实践，特别是在涉及到多个组件间共享状态的情况。下面是如何在 Vue 3 项目中设置和使用 Vuex 的教程，包括 state, mutations, actions, getters 的概念及其用途。
1. 安装 Vuex
首先确保你的项目已经安装了 Vue CLI 并且是 Vue 3 版本。然后安装 Vuex 4.x：
npm install vuex@next --save
或使用 Yarn:
yarn add vuex@next --save
2. 初始化 Vuex Store
在 Vue 3 中，Vuex 的实现方式略有不同，主要在于使用 Composition API。创建一个名为 store.js 的文件，并初始化 Vuex：
import { createStore } from 'vuex';
const store = createStore({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
increment(context) {
context.commit('increment');
},
},
getters: {
doubleCount(state) {
return state.count * 2;
},
},
});
export default store;
3. 配置 Vue 应用来使用 Vuex Store
在你的入口文件（通常是 main.js 或 main.ts）中配置 Vuex store：
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');
4. 在 Vue 组件中使用 Vuex
使用 State
使用 Composition API 来访问 Vuex 中的 state：
使用 Mutations
Mutations 用来同步更新状态：
使用 Actions
Actions 提供了一个异步操作的场所，通常用来处理如网络请求等异步操作：
使用 Getters
Getters 提供了对状态的派生数据进行计算的功能：
5. 总结
State: 存储数据的地方，所有组件都可以访问这些数据。Mutations: 更新 state 的唯一方法，并且必须是同步函数。Actions: 提交 mutation 的方法，可以包含任意异步操作。Getters: 对 state 中的数据进行加工处理，返回新的衍生数据。
6. Vuex 辅助函数
在 Vue 3 中，你可以使用 Vuex 的组合式 API 来管理状态，这包括 useStore，mapState，mapGetters，mapActions 和 mapMutations 等辅助函数。然而，在 Vue 3 中，推荐使用 setup 函数和组合式 API (Composition API) 来组织逻辑。
useStore
useStore 是一个组合式 API 函数，返回当前 store 的引用。
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
return { store };
}
}
mapState
mapState 用于将状态映射到组合式 API 的返回对象。
import { mapState } from 'vuex';
export default {
setup() {
const { count } = mapState(['count'])();
return { count };
}
}
mapGetters
mapGetters 用于将 getter 映射到组合式 API 的返回对象。
import { mapGetters } from 'vuex';
export default {
setup() {
const { doubleCount } = mapGetters(['doubleCount'])();
return { doubleCount };
}
}
mapMutations
mapMutations 用于将 mutations 映射到组合式 API 的方法。
import { mapMutations } from 'vuex';
export default {
setup() {
const { increment } = mapMutations(['increment']);
return { increment };
}
}
mapActions
mapActions 用于将 actions 映射到组合式 API 的方法。
import { mapActions } from 'vuex';
export default {
setup() {
const { fetchCount } = mapActions(['fetchCount']);
return { fetchCount };
}
}
使用示例
假设你有一个名为 counter 的模块，并且你想在组件中使用它：
// store/modules/counter.js
const state = {
count: 0,
};
const getters = {
doubleCount(state) {
return state.count * 2;
},
};
const mutations = {
increment(state) {
state.count++;
},
};
const actions = {
async fetchCount({ commit }) {
// 模拟异步操作
await new Promise(resolve => setTimeout(resolve, 1000));
commit('increment');
},
};
export default {
namespaced: true,
state,
getters,
mutations,
actions,
};
在你的 Vue 3 组件中，你可以这样使用：
{{ count }}
注意事项
使用 mapState, mapGetters, mapMutations, mapActions 时，你需要确保它们作为函数被调用，并且返回的对象需要被解构赋值给组件中的响应式变量。如果你的模块是命名空间化的，你需要正确地引用它们。在 Vue 3 中，Vuex 的辅助函数需要配合 setup 函数使用，并且通常与 Composition API 一起使用。
这些辅助函数可以帮助你在 Vue 3 中更方便地使用 Vuex 来管理状态，同时也让代码更具可读性和可维护性。