Vuex是一个专门Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态自管理
安装
npm install vuex --save
或
yarn add --dev vuex
什么是Vuex？
Vuex中Store的模板化定义为:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
},
mutation:{
},
actions:{
},
getters:{
},
modules:{
}
})
Vuex Store的5个重要属性：
- state：state是Vuex中的公共状态，在这里可以设置数据的初始状态。 在vue组件如何获得Vuex状态?从store实例中读取状态最简单的方法就是在计算属性中返回某个状态：
const Counter={
template: `<div>{{count}}</div>`,
computed:{
count(){
return store.state.count}
}
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
- mutation：提交mutation时更改Vuex的store 的唯一方法
const store = new Vuex.Store({
state:{
count:1
},
mutation:{
increment(state){
state.count++
}
}
})
mutation的回调函数会接受state作为第一个参数，是我们实际进行状态更改的地方，第二个参数payload，是自定义参数。
- Actions类似于mutation，不同的是Action提交的是mutation，而不是直接变更状态，Action可以包含任意异步操作
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action函数接受一个与store实例相同的方法和属性的context对象，可以用context调用context.commit、context.state和context.getters。
- getter:getter可以认为是store的计算属性。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，只有依赖值发生变化才会被重新计算。
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
- module: 当应用的所有状态集中到一个比较大的对象，应用变得复杂，store对象也可能会很臃肿，Vuex允许store分割成Moudle，每个模块拥有自己的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 的状态
项目结构
Vuex并不限制代码结构，但是它规定需要遵守的规则：
-
应用层级的状态应该集中到单个 store 对象中。
-
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
-
异步逻辑都应该封装到 action 里面。
参考文档：
