报错原理解读

 Error: [vuex] Do not mutate vuex store state outside mutation handlers.

该报错从文本意思理解还是很清晰的，不要在mutation函数外修改vuex中存储的值。

通常情况下，vuex挂载到vue上之后，vuex中的值可以在组件中修改

this.$store.state.count = 1

但我们不推荐这种做法，这是一种代码规范，建议不要在mutation函数外修改state的值，避免不必要的参数混乱。

至于要不要遵循这种规范，完全取决于你。vuex也很贴心的提供了严格模式，来控制是否提示不规范的store值修改。参考代码：

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import defaultState from './state'
import mutations from './mutations'

Vue.use(Vuex) // 将Vuex挂载到Vue

const debug = process.env.NODE_ENV !== 'production'

export default () => {
  return new Vuex.Store({
    strict: debug, // 严格模式，是否能在mutation外修改state值，true → 不能修改，false → 可以修改
    actions,
    getters,
    state: defaultState,
    mutations
  })
}

注意：开启了严格模式之后，若在mutation外修改值，也能动态渲染到页面上，只是vue会有警告提示，类似于这样：

 试错案例分析

出现这个Vuex报错，通常是显性的（真的在组件中调用了this.$store.state，并且对其进行了改变），以下介绍一种自己犯错遇到的不易察觉的出错方式。

项目需要使用了vux（一个Vue的移动端组件库）中的toast组件，看官网参数如下：

vux官网：https://doc.vux.li/zh-CN/components/toast.html

toast组件文档：

浏览文档之后，一顿操作，看到文档中写着“使用v-model绑定”，就把代码写成了这样：

// 组件中使用toast
<template>
  <div>
    <button @click="showToast">点我显示toast</button>
    <vux-toast v-model="vuxToast.value" :position="vuxToast.position" :type="vuxToast.type" :text="vuxToast.text"></vux-toast>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['vuxToast'])
  },
  method: {
    ...mapMutations(['updataVuxToast']),
    showToast {
      this.updataVuxToast({value: true, text: '显示toast'})
    }
  }
}
</script>

// state.js
export default {
  vuxToast: {
    position: 'middle',
    type: 'text',
    value: false,
    text: ''
  }
}

// mutations.js
export default {
  updataVuxToast (state, props) {
    const vuxToast = Object.assign({}, state.vuxToast, props)
    state.vuxToast = vuxToast
  }
}

是不是看着完全没问题？并没有在组件中直接修改vuex中的值。运行之后，toast提示正常显示，2秒后提示关闭，这时就会促发Error: [vuex] Do not mutate vuex store state outside mutation handlers.错误，一脸懵，各种查找是否在其他组件修改了值。

最后注意到一点：在toast提示框关闭之后才报错，再端详一遍代码，看着v-model不太对呀！

将 v-model 改成 :value

<vux-toast :value="vuxToast.value" :position="vuxToast.position" :type="vuxToast.type" :text="vuxToast.text"></vux-toast>

再次测试，完美运行！ 

至此，需要去恶补一下v-model的知识啦，也可以了解一下组件的自定义双向绑定，对于理解这个v-model知识点非常有帮助。

还是怪自己学艺不精。

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！