vuex sync form field to store

[jackPanyj]

当使用vuex的时候，对于表单的处理方面，需要实时的更新到store，

即将表单的的v-model关联到store.

官方文档给出的方法是这样的。 传送门

我采用的是第二种。利用computed属性的set方法提交mutations

但是当字段过多时，感觉重复的就会很多，于是就封装了下。

import store from './{store_path}'
import get from 'lodash.get'
import set from 'lodash.set'

// 表单数据同步到vuex的state中
// fields: 为一个数组，里面是要同步字段的组合
// namespace: 表示子模块 即store中一级对象的属性名 如果没有则不用写

// syncToStore.js
export default function syncToStore (fields = [], namespace = '') {
  let obj = {}
  const state = namespace ? store.state[namespace] : store.state
  fields.forEach(field => {
    Object.assign(obj, {
      [field]: {
        get () {
          return get(store.state, field)
        },
        set (value) {
          store.commit('sync_to_store', {key: field, value, namespace})
        }
      }
    })
  })
  return obj
}

// mutations.js
const mutations = {
  sync_to_store (state, {key, value, namespace}) {
    const state = namespace ? state[namespace] : state
    set(state, key, value)
  }
}

使用方法：

import syncToStore from '{path}/syncToStore'
export default {
    computed: {
        ...syncToStore(['activeTab', 'field1', 'field2'], 'banner') // 第一个数组是对应的v-model的值
    }
}