vuex中modules的基础用法

这篇⽂章主要介绍了vuex中modules的基本⽤法。

1. store⽂件结构

- src

- components- store

-index.js -modules -app.js -bus.js

2.1index.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时// 格式： 模块名/模块中的mutationsthis.$store.commit(\"app/setUser\// 获取属性时同样加上模块名this.$store.state.app.user

4.2 utils.js中使⽤

// 引⼊ 这⾥的store 就相当于页⾯中的 this.$storeimport store from '@/store'

export const setCurUser = (user) => { let curUser = store.app.user if(!curUser) {

store.commit(\"app/setUser\ 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)})