vue2 最新版本
现在可以在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,因为还有工作要完成,所以只能选择这种暴力的解决方法。等有时间了,再想想有没有其他的解决方法。也欢迎有更好解决办法的人指正。