vuex知识点记录

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
      }
    })
  })
}

猜你喜欢