state状态分类与常量转换

最新推荐文章于 2024-05-20 00:15:00 发布

原创最新推荐文章于 2024-05-20 00:15:00 发布 · 508 阅读

CC 4.0 BY-SA版权

博客介绍了模块分类管理和常量转换的相关内容。模块分类管理方面，在store下创建user.js文件，index.js引入分类js文件，store用modules存放导入文件，模板使用时用方法返回并添加路径。常量转换则是新建types.js文件存放常量，state文件引入并改变方法名称，模板文件方法也相应改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模块分类管理

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文件里面引入和这个文件和要用的常量，方法名称改变成对应的常量即可

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