vue2+webpack升级vue3+vite，在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就是实例化后的对象，对象里保存着所有需要全局管理的对象，可以在任意页面随意调用。

---

总结

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