第七课时-状态管理-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)    }  }}