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

2024年1月2日 161次阅读 来源: 岳_轻风

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)
    }
  }
}
    原文作者：岳_轻风
    原文地址: https://segmentfault.com/a/1190000019102881
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞