vue2.7 setup语法中使用vuex

vue2 最新版本

2.7 版本更新


现在可以在vue2的项目中使用composition Api 和 setup。

升级至vue2.7

在项目中的一个数据展示页面添加setup函数。 使用的是 setup() {} 的写法,没有使用 <script setup>
进过使用后发现,其他如 refonMounted 等从 vue 中引入的都没有问题。

但是在vuex的处理上碰到了一点问题。

在vue3 中vuex 在4.x版本提供了 useStore 的方法可以在setup中获取到store 对象。
但是在vue2 中,vuex 并没有类似的方法。并且在setup 并不能直接使用mapActions, mapGetters, mapState 等方法。
之前的处理

computed:{
	...mapState('modulesName',['stateName'])
},
methods:{
	...mapActions("modulesName", ["actionName"]),
}

在后续的使用中直接 this.stateNamethis.actionName
在2.7中的处理
直接在页面中 引入全局的 store 对象

import store from '@/store/index';

state

store.state.moduleName.stateName

actions

store.dispatch("moduleName/actionName", paramsObj);

总结

这种全局引入 store 的方式,总感觉怪怪的。早上刚刚升级到2.7,因为还有工作要完成,所以只能选择这种暴力的解决方法。等有时间了,再想想有没有其他的解决方法。也欢迎有更好解决办法的人指正。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余九月丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值