1. 什么是 Vuex?
想象一下,你家里有一个大冰箱,所有家庭成员都可以访问这个冰箱。每个人都可以往里面放东西,也可以从里面拿东西。这个冰箱就像是 Vuex 中的“状态”,每个家庭成员(Vue 组件)都可以共享这个状态。
2. Vuex 的四个核心概念
Vuex 主要由四个部分组成:State(状态),Getters(获取器),Mutations(突变),Actions(动作)
。
State(状态)
State 就是存储在“冰箱”里的数据。例如,冰箱里有水果、蔬菜、饮料等等。在 Vuex 中,我们把这些数据存储在 State 中,所有组件都可以访问这些数据。
const state = {
count: 0
};
Getters(获取器)
Getters 就像冰箱里的标签,可以帮助你快速找到冰箱里的东西。例如,你可以有一个标签告诉你冰箱里有多少个苹果。在 Vuex 中,Getters 用于从 State 中派生出一些状态,类似于计算属性。
const getters = {
doubleCount: state => state.count * 2
};
Mutations(突变)
Mutations 是修改“冰箱”里东西的唯一方法。例如,你吃掉了一个苹果,你需要告诉冰箱“减少一个苹果”。在 Vuex 中,Mutations 用于同步地修改 State。
const mutations = {
increment(state) {
state.count++;
}
};
Actions(动作)
Actions 有点像“家务清单”,你可以在上面写下你要做的事情,比如“明天去买菜”。在 Vuex 中,Actions 用于异步操作,然后提交 Mutations 修改 State。例如,你可以从服务器获取数据,然后把数据存储到 State 中。
const actions = {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
};