state状态分类与常量转换

模块分类管理

store下面创建user.js文件 写法与常规一样

const app = {
    state: {   //要设置的全局访问的state对象
        num: 10,
    },
    getters: {   //实时监听state值的变化(最新状态)
        myNum(state) {
            return `getters处理过得值 ${state.num }`
        },
    },
    mutations: {
        add(state, n) {
            state.num += n
        },
        minus(state, n) {
            state.num -= n
        }
    },
    actions: {
        async myAdd(context) {
            context.commit('add', 1)
            // let add = await axios.get(......)
            return 'actions返回'
        },
        myMinus(context) {
            context.commit('minus', 1)
        },
    }
};
export default app;

index.js文件引入分类js文件 。store里面使用modules来存放导入的文件

import app from './user'

const store = new Vuex.Store({

	modules:{  //归类
		app
	}
});

模板使用时用方法来返回，需要添加前面的路径

...mapState({
  num: state => {
    return state.app.num;
  }
}),
//getters不需要改变
...mapGetters(["myNum"])

常量转换（便于区分查询）

新建一个types.js文件，存放一些要转换的常量，用大写便于区分

export const ADD = 'ADD'
export const MINUS = 'MINUS'
export const MYADD = 'MYADD'
export const MYMINUS = 'MYMINUS'
 

需要用到这些常量的state文件里面引入和这个文件和要用的常量，方法名称改变成对应的常量即可

对应的模板文件方法里面也跟着改变成大写