vue-element-admin中vuex多模块问题

store的配置文件

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
 const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
// 大概理解下 不用去一个一个模块的导入 他已经写好了方法 来遍历modules文件下的各个子模块
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,  //引入全部子模块
  getters
})

export default store

modules文件中存放的是各个小模块，分割store，每个模块内部都可以有自己的state、mutation、action、getter

src/store/modules/subject.js

const state = {
  DBNames: []
}
const mutations = {
  changedb(state, db) {
    state.DBNames = db
  }
}
export default {
  namespaced: true, //独立的命名空间 模块内部的action、mutation、getter被注册在独立的命名空间内  false 则注册在全局
  state,
  mutations
}

使用方式：
①直接使用

在需要的 .vue 文件的<script>内的合适位置

//this.$store.state.模块名.变量名
this.$store.state.subject.DBNames

//this.$store.commit( '模块名/函数名' , 参数 )
this.$store.commit('subject/changedb','lll')

---

②配合辅助函数

import { mapState,mapMutations } from "vuex"

...

computed: {
    ...mapState({  
      name: state => state.subject.DBNames
    })

    ...mapState('subject',{  
      name: state => state.DBNames
    })
  },

//使用  this.name

methods: {
    ...mapMutations({
      dbChange: 'subject/changedb'   // 改变的函数名:' 模块名/函数名 '
    }),

    ...mapMutations('subject',{
      dbChange: 'changedb'   // 改变的函数名:' 模块名/函数名 '
    }),
}
//使用  this.dbChange(参数)

---

③配合模块辅助函数使用

import { createNamespacedHelpers } from "vuex"
const { mapState,mapMutations } = createNamespacedHelpers('subject')

...
//调用方法和②一样
computed: {
    ...mapState({
      name: state => state.DBNames
    })
  },
  methods: {
    ...mapMutations({
      dbChange: 'changedb'
    }),
  }