Vuex 项目结构

推荐抽出各模块的方式，方便维护

1、推荐的目录结构

 - public		静态资源文件
 - src
	|- assets		静态资源目录
	|- components	公共组件目录
	|- http			axios封装目录
	|- router		路由管理目录
	|- store		状态管理目录
		|- index.js		  store 实例文件
		|- mutations.js	  修改 state 状态文件
		|- getters.js	  计算属性文件
		|- actions.js	  处理异步操作文件
		|- modules		  模块目录
			|- moduleA	    模块文件
			|- moduleB	    模块文件
	|- views	 	视图组件目录
	|- App.vue	 	根组件
	|- main.js	 	入口文件
 - package.json	 	npm配置文件

2、index.js 文件中

// 导入
import Vue from 'vue'
import Vuex from 'vuex'

import mutations from './mutations '
import getters from './getters '
import actions from './actions'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'


// state 抽出
const state = {
	total = 100,
	stuList: [
		{name: 'Tom', age: 19},
		{name: 'Jack', age: 18}
	]
}

// store 实例对象
const store = new Vuex.store({
	state, 
	mutations,
	getters,
	actions,
	modules: {
		a: moduleA,
		// 也可以采用ES6的写法
		moudleB
	}
})

——————————————————
“坐在角落说的第一句话，你留心听了 ”

标签：管理模式,状态,mutations,js,文件,import,Vuex,目录,store
来源： https://blog.csdn.net/weixin_43503730/article/details/118638422