state状态分类与常量转换

博客介绍了模块分类管理和常量转换的相关内容。模块分类管理方面,在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文件里面引入和这个文件和要用的常量,方法名称改变成对应的常量即可

对应的模板文件方法里面也跟着改变成大写
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值