Vuex——进阶

Vuex的基础篇主要介绍了Vuex的一些理论知识，和五个核心模块。那么我们继续去了解进阶内容，其实进阶内容比基础篇更加简单。

严格模式

什么是严格模式呢？Vuex规定了只能通过mutation函数改变状态，实际上getters和action都可以改变状态，只不过并不运行通过它们修改。所以严格模式就是在状态变更且不是由 mutation 函数引起的，将会抛出错误，这能保证所有的状态变更都能被调试工具跟踪到。

严格模式通过strict: true开启：

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

当然，严格模式也只运行在开发版本下开启。发布版本下严禁启严格模式，格模式会深度监测状态树来检测不合规的状态变更，所以不推荐开启，以避免性能损失。

表单处理

在表单控件上我们通常会使用v-model指令来进行数据绑定，如果绑定的数据是 Vuex 中状态数据。在用户输入时，v-model 会试图直接修改 状态数据，将引发报错：

<div id="app">
<My-Component></My-Component>
</div>
<script>
const store = new Vuex.Store({
    state: {
        val: "加油！！"
    },
    mutations: {
        update_val(state, newval) {
            state.count += newval;
        }
    }
});
Vue.component('MyComponent', {
    computed: Vuex.mapState(['val']),
    template: ``,
})
let vm = new Vue({
    el: "#app",
    store
})
</script>

为了解决上述问题，我们有两种方法：

（1）给元素使用 v-bind指令绑定 value 属性，然后使用 v-on指令监听 input 事件，在事件处理中提交mutations

Vue.component('MyComponent', {
    computed: Vuex.mapState(['val']),
    template: ``,
    methods: {
        updateval(e) {
            this.$store.commit('update_val', e.target.value)
        }
    }
})

（2）组件中的计算属性可以提供一个 setter，用于计算属性的修改：

template: ``,
computed: {
    val: {
        get() {
            return this.$store.state.val;
        },
        set(value) {
            this.$store.commit('update_val', value)
        }
    }
},

以上就是进阶篇所有要讲解的内容了，进阶篇的内容很少，也没有多少重点，但是进阶中还有一个部分我没有写进来，大家可以进入官方文档自行查看。