uniapp项目中vuex的模块化

首先，这只是我的个人习惯，并不是非要这么写

  这是store文件的结构

main.js

import App from './App'
import Vue from 'vue'
import store from './store'; // 引入 Vuex 存储

const app = new Vue({
	...App,
	store, // 将 Vuex 存储挂载到 Vue 实例上
});
app.$mount();

1. index.js

// 引入 Vuex
import Vue from 'vue';
import Vuex from 'vuex';
import modules from './modules'  //注意如果modules文件夹中如果没有内容会报错
import getters from './getters'

// 使用 Vuex 插件
Vue.use(Vuex);

// 创建 Vuex 存储
export default new Vuex.Store({
	modules,
	getters
});

2. getters.js

export default {
	userInfo: state => state.app.userInfo || {},
    token: state => state.app.token,
	
	orderId: state => state.order.orderId,
	
	project_info: state => state.project.project_info
	
};

userInfo、token、orderId、project_info都是存储在vuex中的公共状态

userInfo: state => state.app.userInfo || {},  这一行代码中state.app为userInfo所存储的模块，也就是modules文件夹中的app.js文件

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
	    return {
			info: {

			},
		}
	},
  computed: {
    ...mapGetters([
      'userInfo',
      'token',
      'orderId',
      'project_info',
    ])
  },
  methods: {
	//初始化用户数据
	fun() {
	   this.info = this.userInfo
    }
				
  },
};
</script>

在页面中使用  mapGetters  辅助函数进行映射，就能获取到存储在vuex中的公共状态了。

2. modules

modules中的index文件较为特殊，其中的对象通过import modules from './modules'被导入到store/index.js中

import app from "./app";
import indexx from "./indexx";
import order from "./order";
import project from "./project";
import bluetooth from "./bluetooth";

export default {
  app,
  indexx,
  order,
  project,
  bluetooth
};

这里用aap.js文件示例

const state = {
	userInfo: {
		id: null,
		nikeName: '',
		avatar: '',
		phone: '',
	},
	token: '',
};

const mutations = {
	setuserInfo_m(state, userInfo) {
		state.userInfo = userInfo
	},
	settoken_m(state, token) {
		state.token = token
	},
};

const actions = {
	setuserInfo_a({
		commit
	}, userInfo) {
		commit('setuserInfo_m', userInfo)
	},
	settoken_a({
		commit
	}, token) {
		commit('settoken_m', token)
	},
};

export default {
	state,
	mutations,
	actions
};

以下是通过接口获取用户信息，并存储到公共状态中

<script>
import { mapActions} from 'vuex';

export default {
	data() {
	    return {
			info: {

			},
		}
	},
  methods: {
    ...mapActions(['setuserInfo_a']),
				//获取用户信息
			async user_infofun() {
				let {
					data
				} = await user_info()
				let info = {
					avater: data.avatar,
					id: data.id,
					nikeName: data.nickname,
					phone: this.info.phone
				}
				this.setuserInfo_a(info)
				this.info = info
			},
				
  },
};
</script>

注意 我这种写法各个模块中的状态名称，函数名称不能相同