第七课时: 状态管理, Vuex进阶

1.插件
由于vuex是存在内存中的，因此刷新页面的时候其中的值就会初始化。为了刷新时不让其改变，能够开发一个插件，把state状态都存在本地中。

saveInLocal.js:

export default store => {
      if (localStorage.state) store.replaceState(JSON.parse(localStorage.state))
      store.subscribe((mutation, state) => {
        localStorage.state = JSON.stringify(state)
      })
    }

在store文件夹中的index.js 添加代码:

import saveInLocal from './plugin/saveInLocal'
Vue.use(Vuex)

export default new Vuex.Store({
    //...
    plugins: [ saveInLocal ]
})

2.严格模式
开启严格模式，仅需在建立 store 的时候传入 strict: true：

const store = new Vuex.Store({
  // ...
  strict: true
})

在严格模式下，不管什么时候发生了状态变动且不是由 mutation 函数引发的，将会抛出错误。这能保证全部的状态变动都能被调试工具跟踪到。

3.vuex + 双向绑定
必须认可，这样作比简单地使用“v-model + 局部状态”要啰嗦得多，而且也损失了一些 v-model 中颇有用的特性。另外一个方法是使用带有 setter 的双向绑定计算属性：

<input v-model="message">

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}