Vuex 是 Vue.js 官方推荐的状态管理库,用于在 Vue.js 应用中管理应用的状态。
五大核心:
-
State(状态): Vuex 使用一个集中式的状态树(store)来存储应用的状态。该状态树是一个普通的 JavaScript 对象,它包含了应用中的所有状态数据。
-
Mutation(突变): Mutations 是用于修改状态的函数。每个 Mutation 函数都接收一个当前状态作为第一个参数,并可以传入额外的参数来进行状态的修改。Mutation 必须是同步操作,用于保证状态的可追踪性。
-
Action(动作): Actions 是用于提交 Mutations 的函数。Actions 可以执行异步操作,并在完成后提交一个或多个 Mutation 来修改状态。它可以包含异步逻辑、业务逻辑和其他的操作。
-
Getter(获取器): Getters 是用于从状态树中获取派生状态的函数。它可以对状态进行一些计算,然后返回计算后的值,类似于 Vue 组件中的计算属性。
-
Module(模块): Vuex 允许将状态树划分为多个模块,每个模块拥有自己的 State、Mutation、Action 和 Getter。这有助于管理大型应用的状态。
实现原理:
-
创建一个 Vuex Store 对象,传入一个包含 state、mutations、actions 和 getters 的配置对象。
-
State 存储应用的状态数据。
-
Mutations 用于修改状态数据,通过提交 Mutation 来改变状态,确保状态修改的可追踪性。
-
Actions 用于处理异步操作,可以包含业务逻辑,然后在异步操作完成后提交 Mutations。
-
Getters 用于从状态树中派生出一些状态,类似于计算属性。
-
可选地使用 Modules 划分状态树为多个模块,提高应用的可维护性。
-
在 Vue 组件中使用
this.$store
来访问 Vuex Store,从而读取状态、提交 Mutations、分发 Actions 等。
核心代码:
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});
export default store;