vue2+webpack升级vue3+vite,在vue3组合式编程中使用vuex

同学们可以私信我加入学习群!


正文开始

  • 场景
  • 一、从vue2到vue3组合式编程
  • 二、vue3中调用vuex
  • 总结


场景

我的项目是从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就是实例化后的对象,对象里保存着所有需要全局管理的对象,可以在任意页面随意调用。


总结

大家有什么问题可以私信博主。原创不易,多多关注,多多点赞,拜谢!

你可能感兴趣的:(vue3实战专栏,webpack,vue.js,前端)