【快速入门Vue系列】第三十九篇：Vuex的几点细节，你值得拥有

• 这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

vuex的应用场景

• 正常数据放到data里面就行了，免得麻烦，一般小项目都很少用到vuex，毕竟vuex的步骤稍微多一点
• 一般公共数据放到vuex中会比较好，毕竟组件有自己的data可以存放数据，公共的变量如用户信息、token等。vuex存一份，localstorage再存一份，取数据直接从vuex里面取，取不到再从localstorage里面去取。
• 跨很多组件层级的数据通信，也可以通过vuex去做管理，毕竟vuex就像一个对象一个，好多组件都指向这个对象，当这个vuex对象发生了变化，所有的组件中对应的内容都会发生变化，这样就能做到实时响应，一个变，大家都变

表单处理

在Vuex的state上使用v-model时，由于会直接更改state的值，所以Vue会抛出错误。

如果想要使用双向数据的功能，就需要自己模拟一个v-model: :value="msg" @input="updateMsg"。

双向绑定的计算属性

上面的做法，比v-model本身繁琐很多，所以我们还可以使用计算属性的setter来实现双向绑定：

<input v-model="msg">

computed: {
  msg: {
    get () {
      return this.$store.state.obj.msg;
    },
    set (value) {
      this.$store.commit(UPDATE_MSG, { value });
    }
  }
}

Mutation 必须是同步函数

要记住 mutation 必须是同步函数。why？

mutations: {
  [COUNT_INCREMENT] (state) {
    setTimeout(() => {
      state.count ++;
    }, 1000)
  },
}

执行上端代码，我们会发现更改state的操作是在回调函数中执行的，这样会让我们的代码在devtools中变的不好调试：当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用，任何在回调函数中进行的状态的改变都是不可追踪的。

mutations 同步修改状态， 如果说mutations是一个异步函数，异步修改状态，那么devtools是不能跟踪数据的变化。

严格模式

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

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

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

开发环境与发布环境

不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更，要确保在发布环境下关闭严格模式，以避免性能损失。

const store = new Vuex.Store({
   // ... 
  strict: process.env.NODE_ENV !== 'production'
})

最后

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤