如何优雅的使用Vuex

本文优势主要体现在：引入Vuex时，默认开启命名空间,利用ES6改进mutations的写法，写起来更简洁

1.文件目录

D:\vue-test\src\store

+---store
|   |   index.js
|   |   
|   \---modules
|           dataForm.js
|           setting.js

2. 引入Vuex

Vuex中的store文件夹下的index.js会引入Vuex，然后使用require.context('./modules', true, /\.js$/)将modules文件夹下的文件引入，打开命名空间，文件名就是命名空间的模块名

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  modules[moduleName].namespaced = true;   //打开命名空间
  return modules
}, {})

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

export default store

3. 使用Vuex

3.1 改进mutations的写法

state名称可以在使用this.$store.commit时，动态传入

/*store文件下的dataForm.js*/
state: () => ({
    channelOptions: {},
    cableItemOptions: {}
})

mutations: {
//mutation的常用写法
updateOptions(state,  data ) {
    state.channelOptions = data
  }
    
//mutation的改进写法,state名称可以在使用this.$store.commit时，动态传入
updateOptions(state, { data, type }) {
  //{data,type}是把传进来的对象解构赋值
  state[type] = data
  }
}
--------------------------------------------------
/*vue组件.js*/
//dataForm是文件名即module名，updateOPtions即mutations里的方法名
this.$store.commit("dataForm/updateOptions", {
  data: data, //你想要传入的值
  type: "channelOptions" //想修改的state属性名称
});

如果不想覆盖原来的对象，只改变一部分属性值，可用扩展运算符

/*store文件下的dataForm.js*/
state: () => ({
    channelOptions: {
        id:'5',
        name:'名称',
        type:'类型'
    }
})

mutations: {
//如果不想覆盖原来的对象，可用扩展运算符
updateOptions(state, { data, type }) {
      //相当于state.channelOptions = {...state.channelOptions,...data}
      state[type] = { ...state[type], ...data }
    },
}
--------------------------------------------------------------------
/*vue组件.js*/
this.$store.commit("dataForm/updateOptions", {
        data: { type: '新类型' },//这样只更改type的值，不会更改id和name属性
        type: "channelOptions"
 });

3.2 vuex中state的引用

使用辅助函数mapState，简化写法

/*vue组件.js*/
import { mapState } from "vuex";
export default {
  computed: {
  //第一个参数是命名空间的模块名，第二个参数对象中属性名自己决定，属性值对应state中的属性
    ...mapState("dataForm", {
      $store_channelOptions: "channelOptions",
      $store_cableItemOptions: "cableItemOptions",
    })
  },
  
  mounted() {
      //this.$store_cableItemOptions相当于this.$store.state.dataForm.cableItemOptions
      console.log(this.$store_cableItemOptions)
  }
}

为什么我要添加$store_这个前缀，因为需要让其他人阅读代码时，能够直观看出我使用了vuex，避免与vue组件中的普通属性搞混。

注重代码质量更需要让其他人能读懂你的代码

3.3 补充getters的引用方法

/*vue组件.js*/

//dataForm是命名空间的模块名，Isshow是getters中的方法名
this.$store.getters['dataForm/IsShow']"