同学们可以私信我加入学习群!
场景
我的项目是从vue2+webpack升级为vue3+vite,这种升级工作,其实最重要的不是如何快速准确地把原有vue2项目全部重构为vue3项目,因为这是不现实的。
升级工作一定是一个长久的持续过程,所以如何保证旧的vue2项目与新的vue3模块之间互相兼容,才是重中之重。
在原项目中,很多基础信息,如人员信息、组织信息等,都是利用全局状态管理工具保存到内存中,vue2中搭配的工具是vuex,而在重构过程中,我引入了新的状态管理工具pinia。
如果把管理基础信息的vuex完全替换,成本太高,影响范围也太大,风险很大。所以现阶段,还是vuex和pinia共存的状态。
本文主要解决,当添加新的模块时,基于vue3编写组合式代码,如何便捷地使用vuex保存的变量。
一、从vue2到vue3组合式编程
从vue2到vue3组合式编程,有一个小思维习惯要改变。
vue2中,把所有的工具、变量、函数等等都保存到vue实例(this)中,这样做有一个好处,就是调用起来很方便,任何地方只要this.变量,就可以实现相应的功能。有一个坏处就是,this相对于其他人来说,是个黑盒。
一个对项目完全陌生的的程序员,接手项目代码,如果项目规模特别大,那么this里的值就很多很乱,梳理代码、定位bug等都会增加很多阻碍。
而vue3组合式编程中,虽然没有明确说不要使用全局变量this,但是我个人观点,应该要规范引入与输出。让每一个组件或者每一个模块,都更清晰,不管是读代码,还是解耦模块,都会更方便。(读与写的比例,大概是10:1)。
所以在vue3组合式编程中,使用vuex时,就不建议再去使用this.store.xxx的方式,虽然vue3中也可以通过函数定义全局变量。
二、vue3中调用vuex
vuex是提供了api调用项目中的状态管理实例的。这也是很好理解的,毕竟不管是什么工具,js能实现状态管理的方式无非也就是实例化对象或者闭包函数,vuex和pinia应该是通过实例化对象(猜的,没看过源码,对象操作更方便)。所以它们提供个函数获取实例化后的对象,是很容易的事情。
pinia就不多说了,官网推荐的就是通过函数api调用对象。vuex中也提供了类似的方法:
import {useStore} from 'vuex'
const store = useStore()
const orgList=computed(()=>{
return store.state.org.orgList
})
这就是一个很简单的例子,获取全局状态state中保存的变量。
需要注意的是,调用orgList时,应该是orgList.value,如下:
let ml = _.cloneDeep(orgList.value)
在上面代码中,useStore就是vuex提供的获取实例对象方法,store就是实例化后的对象,对象里保存着所有需要全局管理的对象,可以在任意页面随意调用。文章来源:https://www.toymoban.com/news/detail-801200.html
总结
大家有什么问题可以私信博主。原创不易,多多关注,多多点赞,拜谢!文章来源地址https://www.toymoban.com/news/detail-801200.html
到了这里,关于vue2+webpack升级vue3+vite,在vue3组合式编程中使用vuex的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!