- state:
单一状态树,每个应用将仅仅包含一个 store 实例。
- getters:
- mutation: (同步操作)
this.$store.commit('xxx')
在methods中使用mapMutations将组件中的 methods 映射为 store.commit
调用。
- actions:(异步操作)
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,但不是 store 实例本身(模块内部,命名空间)。Action 提交的是 mutation,而不是直接变更状态。
store.dispatch('increment')
支持promise,async / await
- modules:(局部:模块内部)
对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象。
对于模块内部的 action,局部状态通过 context.state
暴露出来,根节点状态则为 context.rootState。
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true
的方式使其成为带命名空间的模块。
- 热重载
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'
Vue.use(Vuex)
const state = { ... }
const store = new Vuex.Store({
state,
mutations,
modules: {
a: moduleA
}
})
if (module.hot) {
// 使 action 和 mutation 成为可热重载模块
module.hot.accept(['./mutations', './modules/a'], () => {
// 获取更新后的模块
// 因为 babel 6 的模块编译格式问题,这里需要加上 `.default`
const newMutations = require('./mutations').default
const newModuleA = require('./modules/a').default
// 加载新模块
store.hotUpdate({
mutations: newMutations,
modules: {
a: newModuleA
}
})
})
}