vue2 最新版本

2.7 版本更新

---

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

升级至vue2.7

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

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

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

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

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

import store from '@/store/index';

state

store.state.moduleName.stateName

actions

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

总结

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