VueX 是 Vue 的状态管理模式，集中式存储管理应用的所有组件的状态（state）
- 单一状态树 : 每个应用仅包含一个 store 实例
state
通过store.state获取状态对象，通过store.commit调用方法改变state
改变store中的state的唯一途径就是显式 提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化
当store中的state发生变化，相应的组件也会得到更新
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
})
store.commit('increment' , { amount:10 })
store.commit({
type: 'increment',
amount: 10
})
console.log(store.state.count) // -> 1
通过在根实例中注册store选项，子组件能通过 this.$store 访问store实例
const app = new Vue({
el: '#app',
store
})
mapState辅助函数
当一个组件中需要用到大量store中内容时，为避免频繁调用this.$store.state.xxx，可通过mapState将store中指定字段批量映射进组件的computed：
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
count: state => state.count,
countAlias: 'count', // 等于 `state => state.count`
'haha', // 等于 haha: haha => haha
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
或直接给 mapState 传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
可使用扩展运算符，和其他计算属性合并 (后出现重名属性时，后写的会覆盖前面的)
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
getters
类似计算属性，其返回值会被缓存起来，只有当它的依赖值发生改变才会重新计算：
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
也可以返回一个函数，通过方法访问来实现给 getter 传参（此时不会缓存结果）：
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
...
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
mapGetters辅助函数
同mapState，将 store 中的 getter 映射到局部计算属性
mutations (同步操作)
用于更改 Vuex 的 store 中的状态
mutations: {
increment (state,payload) {
state.count += payload.amount
}
}
具有两种提交方式
store.commit('increment', {
amount: 10
})
store.commit({
type: 'increment',
amount: 10
})
Vue2中，注意遵守响应规则：
- 最好提前在你的 store 中初始化好所有所需属性。
- 当需要在对象上添加新属性时，你应该
使用Vue.set(obj, 'newProp', 123), 或以新对象替换老对象。例如：state.obj = { ...state.obj, newProp: 123 }
mapMutations 辅助函数
将组件中的 methods 映射为 store.commit 调用
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}
actions (异步操作)
Action 提交的是 mutation，而不是直接变更状态。
Action 函数接受一个与store实例具有相同属性的context对象，但不是store实例本身：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
}
})
同样支持两种分发方式
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
mapActions 辅助函数
将组件的 methods 映射为 store.dispatch 调用
支持 Promise 和 async/await
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
},
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
...
store.dispatch('actionA').then(() => {
// ...
})
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
modules
因使用了单一状态树，当状态较多时为防止臃肿，可根据功能拆分模块。
每个模块拥有自己的state、mutation、action、getter，模块间可以嵌套形成父子关系。
注意，默认情况下子模块会继承父的命名空间，除了state改为通过store.state.模块名.xxx方式调用，mutation、action、getter依然使用原本的调用模式，因此需避免重名，或启用namespaced: true模式：
const moduleA = {
namespaced: true,
state: () => ({ ... }),
mutations: { ... },//commit('a/xxx')
actions: { ... },//dispatch('a/xxx')
getters: { ... }//getters['a/xxx']
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = createStore({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
严格模式
无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。(但会带来性能损失，因此生产环境应关闭)
const store = new Vuex.Store({
// ...
strict: process.env.NODE_ENV !== 'production'
})