模块分类管理
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文件里面引入和这个文件和要用的常量,方法名称改变成对应的常量即可
对应的模板文件方法里面也跟着改变成大写