程序员应该知道的vuex冷门小技巧(超好用)

什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式，可以集中管理Vue.js应用程序中的各种数据，并使不同组件间的数据共享变得更加便捷。

Vuex冷门小技巧

1. 使用vuex-map-fields轻松实现表单双向绑定

在实现表单数据双向绑定时，我们通常需要手动编写 computed 属性来实现，这种方式非常繁琐。但是，使用 vuex-map-fields 库可以让表单数据的双向绑定变得非常简单，只需要在你的 computed 属性中绑定 ...mapFields 方法即可。示例如下：

// 安装vuex-map-fields库
npm install vuex-map-fields

// 在store中定义表单数据
const state = {
  formData: {
    name: '',
    age: '',
    address: ''
  }
}

// getter 中添加FormMapFields方法
import { getField, updateField } from 'vuex-map-fields';
const getters = {
  getField,
  formData: state => state.formData,
}

// mutation中定义更新表单字段的方法
const mutations = {
  updateFormData(state, payload) {
    state.formData[payload.field] = payload.value;
  },
  updateFields(state, data) {
    updateField(state.formData, data);
  }
}

// 绑定mapFields方法到computed
import { mapFields } from 'vuex-map-fields';
computed: {
  ...mapFields([
   'formData.name',
   'formData.age',
   'formData.address'
  ])
}

2. 使用namespaced模块更好地组织你的Vuex代码

在应用比较大的场景下，Vuex 中的 state、mutations、actions 等代码可能会非常的冗长，难以维护。而使用 namespaced 模块，我们可以将复杂的代码逻辑拆分为多个 module，方便管理和维护。

例如，我们可以将所有的订单相关代码放在一个 module 中：

const order = {
  namespaced: true,
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    order
  }
})

// 在组件中使用order module的数据和方法
export default {
  computed: {
    ...mapState({
      orderData: state => state.order.data
    })
  },
  methods: {
    ...mapActions('order', {
      submitOrder: 'submit'
    })
  }
}

通过 namespaced 模块，在组件中使用 module 中的数据、方法也显得异常简单。