个人使用 vuex 的管理方式

state ：对数据的全局存储
getter： 可以理解为computed ，对数据进行计算
mutations ：对数据的同步更改
actions：对数据的异步更改（实现异步操作）
module： 将 store 分割成模块

state，getter，mutations，actions的使用 和 访问 (使用this.$store 需要在main函数引用store)

import Vue from 'vue';
import Vuex from 'vuex';
const store = new Vuex.Store({
	 state: {
	 	a: 1,
	 	list: []，
	 	age: [],
	},
	// 计算数据 （操作数据）暂时还没有实际用到， mutations可以实现数据的同步更新，因此暂时没用到
	 getters: {
	 	add() {
	 		return state.a += 1
	 	}
	 },
	 // 同步异步请求的数据到state中，也可写单独的函数进行调用 同步数据更新
	 mutations: {
	 	// 同步异步请求的数据
	 	 getList(state, res) {
	 	 	state.list = res;
	 	 },
	 	 // 单独的函数进行调用 同步数据更新 (文章下面有调用方式)
	 	 getCurrName(state, res) {
      		const newState = state;
      		state.list.forEach((item) => {
      			if (item.name === res.name) {
      				newState.age = item.age;
      			}
      		})
    	},
	 },
	
	 // 数据异步请求， 一般用于拿取api接口数据（全局数据）
	 actions: {
		  getList({ commit }, params) {
			 return new Promise((resolve) => {
			 	const response = [{"name":"zhang", "age":12},{"name":"yu","age":25},{"name":"feng","age": 24}]
			 	resolve(response);
			 })
		}
	},
})
export default store;

// 调用mutations 方法同步数据更新
this.$store.commit({
    type: 'getCurrName',
    name: 'zhang',
 });
 // 调用actions 方法实现数据的实时请求
 store.dispatch({
   type: 'getList',
}).then(() => {});
// 获取state的数据
this.$store.state
// 访问getters中的add
store.getters.add

module的使用

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
export default store;

//  访问
this.$store.state.moduleA
this.$store.state.moduleB

官方文档例子https://vuex.vuejs.org/zh/guide/modules.html