vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
state
可以理解为初始化状态值:比如
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
这里面包含着一些初始化的值,当需要使用的时候可以在这里拿取
getter
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
意思就是当对state里面的值进行一些比较复杂的运算时,可以调用这个属性,在getter里面进行计算并返回计算后的值,
比如:
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
此计算会返回过滤后的token值
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:
这里表示当你注册好了vuex时,你可以在组件中访问getter,并取到计算后的state值。比如:
store.getters.doneTodos // [{ id: 1, text: '...', done: true }]
mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
***注意:***改变状态管理器中的值,唯一的方法就是利用mutation,比如
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
然后我们在组件中调用这个方法
store.commit('increment')
此时相当于执行了increment方法,将count加1
action
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
下面是一个简单的实例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})
注意 Action 通过 store.dispatch 方法触发:
在组件中使用:
store.dispatch('incrementAsync', {
amount: 10
})
我们可以在 action 内部执行异步操作:
module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
像这样:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
^^^^^^