vuex中使用commit提交mutation来修改state的原因

作为一个刚开始用 vuex 的小白，我一开始的用法就是直接修改 state 的状态，后来看到官网

从组件的方法提交一个变更：
methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

看到这个我就懵了，原来我一直在错误的使用，那么问题来了，为什么要通过 mutation 来修改 state 呢？

利用this.$store.state当然可以更改state里面的值，因为这本身就是vuex存值的地方，但是一般不这样做，因为这样对于数据来说是不可控制的，一般在开发环境，会产生警告的报错。如下

原理是vuex源码中的利用vue的watch功能监听这个数据

但是，这个监听有缺陷，就是如果state里面值是数组的话，对数组某个指针进行更改的时候是无法触发这个监听的

还是希望按要求在mutation中提交更新，养成良好的习惯

 综上所述,请用computed去接收state,如下

//state.js
let state = {
  count: 1,
  name: 'dkr',
  sex: '男',
  from: 'china'
}
export default state

<template>
  <div id="example">
    <button @click="decrement">-</button>
    {{count}}
    {{dataCount}}
    <button @click="increment">+</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataCount: this.$store.state.count //用data接收,后续的修改不实时更新
    }
  },
  computed:{
    count(){
      return this.$store.state.count //用computed接收
    }
  }
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

结果如下,用data接收的值不能及时响应更新,用computed就可以.

 

 

 

通过mutation更新，可以被监听得到，而且也能让后人了解你的意图。