Vuex模块化的使用

1.代码结构

index.js的作用是创建Vuex对象，并引入modules中定义的状态。modules中就是你的模块。

2.引入modules

index.js文件主要是扫描modules包中定义的状态，引入到Vuex中(可直接复制使用)

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

Vue.use(Vuex)

// 搜索目录 获取目录文件对象 类似于Java File modulesFiles = new File("/modules");
const modulesFiles = require.context('./modules', true, /\.js$/)

// 无需导入 使用此方法自动加载
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({
  // 加载模块到Vuex对象中
  modules
})

export default store

3.定义modules

//初始化

const state = {
	
}

const mutations = {
	
}

const actions = {
	
}

const getters = {
	
}

export default {
	namespaced: true,
	state,
	mutations,
	actions,
	getters
}

 4.使用状态

方式一：

computed:{
			...mapState(
				// 模块名称 引入的变量
				'login',['xUsername']
				)
		}

方式二：

<view>
	{{$store.state.login.xUsername}}
</view>

 

参考文档：

Vuex中的store文件中四个map方法的使用以及模块化和命名空间 - 苏槿年 - 博客园