Vuex 严格模式下的表单处理

在使用 Vue 进行表单处理时，我们通常会使用 v-model 来建立双向绑定。但是，如果将表单数据交由 Vuex 管理，这时的双向绑定就会引发问题，因为在 严格模式 下，Vuex 是不允许在 Mutation 之外的地方修改状态数据的。以下用一个简单的项目举例说明，完整代码可在 GitHub（链接） 查看。

src/store/table.js

export default {
  state: {
    namespaced: true,
    table: {
      table_name: ''
    }
  }
}

src/components/NonStrict.vue

<b-form-group label="表名：">
  <b-form-input v-model="table.table_name" />
</b-form-group>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('table', [
      'table'
    ])
  }
}
</script>

当我们在“表名”字段输入文字时，浏览器会报以下错误：

错误：[vuex] 禁止在 Mutation 之外修改 Vuex 状态数据。
    at assert (vuex.esm.js?358c:97)
    at Vue.store._vm.$watch.deep (vuex.esm.js?358c:746)
    at Watcher.run (vue.esm.js?efeb:3233)

当然，我们可以选择不开启严格模式，只是这样就无法通过工具追踪到每一次的状态变动了。下面我将列举几种解决方案，描述如何在严格模式下进行表单处理。

将状态复制到组件中

第一种方案是直接将 Vuex 中的表单数据复制到本地的组件状态中，并在表单和本地状态间建立双向绑定。当用户提交表单时，再将本地数据提交到 Vuex 状态库中。

src/components/LocalCopy.vue

<b-form-input v-model="table.table_name" />

<script>
import _ from 'lodash'

export default {
  data () {
    return {
      table: _.cloneDeep(this.$store.state.table.table)
    }
  },

  methods: {
    handleSubmit (event) {
      this.$store.commit('table/setTable', this.table)
    }
  }
}
</script>

src/store/table.js

export default {
  mutations: {
    setTable (state, payload) {
      state.table = payload
    }
  }
}

以上方式有两个缺陷。其一，在提交状态更新后，若继续修改表单数据，同样会得到“禁止修改”的错误提示。这是因为 setTable 方法将本地状态对象直接传入了 Vuex，我们可以对该方法稍作修改：

setTable (state, payload) {
  // 将对象属性逐一赋值给 Vuex
  _.assign(state.table, payload)
  // 或者，克隆整个对象
  state.table = _.cloneDeep(payload)
}

第二个问题在于如果其他组件也向 Vuex 提交了数据变动（如弹出的对话框中包含了一个子表单），当前表单的数据不会得到更新。这时，我们就需要用到 Vue 的监听机制了：

<script>
export default {
  data () {
    return {
      table: _.cloneDeep(this.$store.state.table.table)
    }
  },

  computed: {
    storeTable () {
      return _.cloneDeep(this.$store.state.table.table)
    }
  },

  watch: {
    storeTable (newValue) {
      this.table = newValue
    }
  }
}
</script>

这个方法还能同时规避第一个问题，因为每当 Vuex 数据更新，本地组件都会重新克隆一份数据。

响应表单更新事件并提交数据

一种类似 ReactJS 的做法是，弃用 v-model，转而使用 :value 展示数据，再通过监听 @input 或 @change 事件来提交数据变更。这样就从双向绑定转换为了单向数据流，Vuex 状态库自此成为整个应用程序的唯一数据源（Single Source of Truth）。

src/components/ExplicitUpdate.vue

<b-form-input :value="table.table_name" @input="updateTableForm({ table_name: $event })" />

<script>
export default {
  computed: {
    ...mapState('table', [
      'table'
    ])
  },

  methods: {
    ...mapMutations('table', [
      'updateTableForm'
    ])
  }
}
</script>

src/store/table.js

export table {
  mutations: {
    updateTableForm (state, payload) {
      _.assign(state.table, payload)
    }
  }
}

以上方法也是 Vuex 文档 所推崇的。而根据 Vue 文档 的介绍，v-model 本质上也是一个“监听 - 修改”流程的语法糖而已。

使用 Vue 计算属性

Vue 的计算属性（Computed Property）可以配置双向的访问器（Getter / Setter），我们可以利用其建立起 Vuex 状态库和本地组件间的桥梁。其中一个限制在于计算属性无法支持嵌套属性（table.table_name），因此我们需要为这些属性设置别名。

src/components/ComputedProperty.vue

<b-form-input v-model="tableName" />
<b-form-select v-model="tableCategory" />

<script>
export default {
  computed: {
    tableName: {
      get () {
        return this.$store.state.table.table.table_name
      },
      set (value) {
        this.updateTableForm({ table_name: value })
      }
    },

    tableCategory: {
      get () {
        return this.$store.state.table.table.category
      },
      set (value) {
        this.updateTableForm({ category: value })
      }
    },
  },

  methods: {
    ...mapMutations('table', [
      'updateTableForm'
    ])
  }
}
</script>

如果表单字段数目过多，全部列出不免有些繁琐，我们可以创建一些工具函数来实现。首先，在 Vuex 状态库中新增一个可修改任意属性的 Mutation，它接收一个 Lodash 风格的属性路径。

mutations: {
  myUpdateField (state, payload) {
    const { path, value } = payload
    _.set(state, path, value)
  }
}

在组件中，我们将传入的“别名 - 路径”对转换成相应的 Getter / Setter 访问器。

const mapFields = (namespace, fields) => {
  return _.mapValues(fields, path => {
    return {
      get () {
        return _.get(this.$store.state[namespace], path)
      },
      set (value) {
        this.$store.commit(`${namespace}/myUpdateField`, { path, value })
      }
    }
  })
}

export default {
  computed: {
    ...mapFields('table', {
      tableName: 'table.table_name',
      tableCategory: 'table.category',
    })
  }
}

开源社区中已经有人建立了一个名为 vuex-map-fields 的项目，其 mapFields 方法就实现了上述功能。

参考资料

• https://vuex.vuejs.org/en/forms.html
• https://ypereirareis.github.io/blog/2017/04/25/vuejs-two-way-data-binding-state-management-vuex-strict-mode/
• https://markus.oberlehner.net/blog/form-fields-two-way-data-binding-and-vuex/
• https://forum.vuejs.org/t/vuex-form-best-practices/20084