vuex使用modules时遇到的坑
其实也不算坑,只是自己没注意看官网api,定义module另外命名时,需要在module中加一个命名空间namespaced: true
属性,否则命名无法暴露出来,导致报[vuex] module namespace not found in mapState()等错误。
vuex中modules基本用法
1. store文件结构
- src - components - store -index.js -modules -app.js -bus.js
2.1 index.js中-手动引入modules
import Vue from 'vue' import Vuex from 'vuex' import bus from './module/bus' import app from './module/app' Vue.use(Vuex) export default new Vuex.Store({ state: { // 这里是根vuex状态 }, mutations: { // 这里是根vuex状态 }, actions: { // 这里是根vuex状态 }, modules: { // 子vuex状态模块注册 namespaced: true, // 为了解决不同模块命名冲突的问题 app, bus } })
2.2 index.js中-动态引入modules
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const dynamicModules = {} const files = require.context('.', true, /\.js$/) const dynamicImportModules = (modules, file, splits, index = 0) => { if (index == 0 && splits[0] == 'modules') { ++index } if (splits.length == index + 1) { if ('index' == splits[index]) { modules[splits[index - 1]] = files(file).default } else { modules.modules[splits[index]] = files(file).default } } else { let tmpModules = {} if ('index' == splits[index + 1]) { tmpModules = modules } else { modules[splits[index]] = modules[splits[index]] ? modules[splits[index]] : {namespaced: true, modules: {}} tmpModules = modules[splits[index]] } dynamicImportModules(tmpModules, file, splits, ++index) } } files.keys().filter(file => file != './index.js').forEach(file => { let splits = file.replace(/(\.\/|\.js)/g, '').split('\/'); dynamicImportModules(dynamicModules, file, splits) }) export default new Vuex.Store({ modules: dynamicModules, strict: process.env.NODE_ENV !== 'production' })
3. app.js文件内容
const state = { user: {}, // 需要管理的状态数据 } const mutations = { setUser (state, val) { state.user = val } } const getters = {} const actions = {} export default { namespaced: true, state, mutations, getters, actions }
4.1 使用 a.vue页面
// 使用模块中的mutations、getters、actions时候,要加上模块名,例如使用commint执行mutations时 // 格式: 模块名/模块中的mutations this.$store.commit("app/setUser", user) // 获取属性时同样加上模块名 this.$store.state.app.user
4.2 utils.js中使用
// 引入 这里的store 就相当于页面中的 this.$store import store from '@/store' export const setCurUser = (user) => { let curUser = store.app.user if(!curUser) { store.commit("app/setUser", user) return user } return curUser }
5. 配置main.js
import Vue from 'vue' import App from './App' import router from './router' import store from './store' new Vue({ el: '#app', router, store, render: h => h(App) })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。