Vue核心技术-59,Vuex-严格模式和表单处理

一,前言

这一篇介绍vuex严格模式和表单处理

---

二,vuex的严格模式

在Vue严格模式下,所有不是由mutation函数引起状态变更,将会抛出错误
这就保证了所有状态变更都能被调试工具跟踪到

开启严格模式，仅需在创建 store 的时候传入 strict: true：

const store = new Vuex.Store({
  // 开启Vuex严格模式
  strict: true
})

注意:

严格模式会深度监测状态树来检测不合规的状态变更,应在发布环境下关闭严格模式，以避免性能损失

可以让构建工具来处理这种情况

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

---

三,vuex严格模式下表单处理的问题

前面提到,在vuex严格模式下,所有非mutation函数引起的状态变化都将报错

问题:

对于表单处理中使用了v-model绑定的数据来自vuex时:

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

假设obj是在计算属性中返回的一个属于Vuex store的对象，
在用户输入时，v-model会试图直接修改obj.message
在严格模式中，由于这个修改不是在 mutation 函数中执行的, 会抛出一个错误

---

四,解决-方法1:Vuex思维

给<input>中绑定value，侦听input或change事件,在事件回调中调用action

监听input事件,触发updateMessage方法

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

在updateMessage方法中调用mutation

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

---

五,解决-方法2:双向绑定的计算属性

使用带有 setter 的双向绑定计算属性

v-model绑定message

<input v-model="message">

使用setter调用提交mutation,触发更新

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