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

这篇具有很好参考价值的文章主要介绍了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就是实例化后的对象,对象里保存着所有需要全局管理的对象,可以在任意页面随意调用。


总结

大家有什么问题可以私信博主。原创不易,多多关注,多多点赞,拜谢!文章来源地址https://www.toymoban.com/news/detail-801200.html

到了这里,关于vue2+webpack升级vue3+vite,在vue3组合式编程中使用vuex的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 组合式函数,实现minxins

    截至目前,组合式函数应该是在VUE 3应用程序中组织业务逻辑最佳的方法。它让我们可以把一些小块的通用逻辑进行抽离、复用,使我们的代码更易于编写、阅读和维护。 根据官方文档说明,在 Vue 应用的概念中, “组合式函数”是一个利用 Vue 组合式 API 来封装和复用有状态

    2024年02月08日
    浏览(41)
  • 快速入门vue3组合式API

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 使用create-vue创建项目 熟悉项目目录和关键文件  组合式API  setup选项 setup选项的写法和执行时机 script setup 语法糖 reactive和ref函数 reactive() ref() computed watch 侦听单个数据

    2024年02月12日
    浏览(50)
  • 【Vue3】如何创建Vue3项目及组合式API

    文章目录 前言 一、如何创建vue3项目? ①使用 vue-cli 创建  ②使用可视化ui创建  ③npm init vite-app   ④npm init vue@latest 二、 API 风格 2.1 选项式 API (Options API) 2.2 组合式 API (Composition API) 总结 例如:随着前端领域的不断发展,vue3学习这门技术也越来越重要,很多人都开启了学习

    2024年02月03日
    浏览(65)
  • vue3 组合式 api 单文件组件写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性。相比于 Vue2 的 Options API,Composition API 更加灵活和可扩展。 在 Composition API 中,我们使用 setup 函数来定义组件的逻辑部分。setup 函数是一个特殊的函数,在创建组

    2024年02月12日
    浏览(41)
  • vue3组合式api单文件组件写法

    一,模板部分  二,js逻辑部分 

    2024年02月13日
    浏览(51)
  • 带你了解vue3组合式api基本写法

    本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。 因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。 一、Vue3 里 script 的三种写法 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vu

    2024年02月01日
    浏览(81)
  • vue3组合式写法在方法中出发点击事件

    问: 用vue3组合式写法,如何在一个方法中调用a标签的点击事件 回答: 在Vue 3的组合式API中,可以通过ref来获取DOM元素的引用,然后使用$el属性访问DOM元素并触发其点击事件。下面是示例代码: 在上述代码中,首先通过ref创建了一个名为linkRef的引用变量,并将其初始化为

    2024年02月15日
    浏览(50)
  • vue3:7、组合式API-watch

     

    2024年02月09日
    浏览(43)
  • Vue3的组合式API中如何使用provide/inject?

    听说 Vue 3 加入了超多酷炫的新功能,比如组合式 API 等等。今天我们就来聊聊 Vue 3 中的组合式 API,并且如何使用 provide/inject 来搞定它! 首先,我们来了解一下组合式 API 是什么。其实,组合式 API 就是一个用来构建和组合函数的工具,它能让我们的代码更加简洁、可读性更

    2024年02月11日
    浏览(44)
  • vue3 组合式api中 ref 和$parent 的使用

    ref 的使用 vue3中, 在 组件中添加一个 component ref=“xxx” ,就可以在父组件中得到 子组件的 dom 对象, 以及 虚拟的 dom 对象, 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了 ref 的使用方法 vue3中ref 的特点 以上如果在vue2中,就可以使用 子组件的对象来改变子组件的

    2024年02月10日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包