vuex严格模式下，表单数据绑定vuex数据

vuex严格模式

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

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

但是发布产品时就不能用到严格模式，所以需要我们这么写严格模式

const store = new Vuex.Store({
  // process.env.NODE_ENV这是全局变量
  strict: process.env.NODE_ENV !== 'production'
})

严格模式下表单数据绑定vuex数据

因为在严格模式下不能直接修改vuex数据，需要通过mutation来修改，所以我们通过以下两种方式来绑定数据

第一种
给 input 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用一个方法:

<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
  }
}

第二种
这种写法更为简单

<input v-model="message">

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