8、严格模式和表单处理

介绍

本文是学习vuex时做的笔记，所有笔记内容请看 vuex学习笔记

严格模式

开启严格模式，仅需要在创建store时后传入 strict:true

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

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

不要再发布环境下启用严格模式，严格模式会深度检测状态树来检测不合规的状态变更。
类似于插件，可以让构建工具处理这种情况：

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

表单处理

当在严格模式中使用Vuex时，在属于Vuex的state上使用v-model 会比较棘手：

<input v-model ='obj.message'>

如上，假如obj是在计算属性中返回的一个属于Vuex.store的对象，在用户输入时，v-model 会试图修改obj.message。在严格模式中，修改不是mutation函数中执行的，会抛出错误。
解决方式一：

<input :value="message" @input = "updateMessage">

//...
computed:{
    ...mapState({
        message:state =>state.obj.message
    })
},
methods:{
    updateMessage(e){
        this.$store.commit('updateMessage',e.target.value)
    }
}

如下为mutation函数
//...
mutations:{
    updateMessage(state,message){
        state.obj.message = message
    }
}

解决方式二：双向绑定的计算属性（推荐）
另一个方法是使用带有 setter 的双向绑定计算属性：

<input v-model='message'>

//...
computed:{
    message:{
        get(){
            return this.$store.state.obj.message
        },
        set(value){
            this.$store.commit('updateMessage',value)
        }
    }
}