耀极客论坛

 找回密码
 立即注册
查看: 714|回复: 0

vue3中vuex与pinia的踩坑笔记记录

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 01:08:14 | 显示全部楼层 |阅读模式
  Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要给大家介绍了关于vue3中vuex与pinia踩坑的相关资料,需要的朋友可以参考下

介绍
  Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
  Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。
  另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库。Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与Redux相同的流量架构。

安装使用
  安装 vuex
  1. npm install vuex@next --save
  2. cnpm install vuex@next --save-
  3. yarn add vuex@next --save
复制代码
  安装 pinia
  1. npm install pinia@next
  2. cnpm install pinia@next
  3. yarn add pinia@next
复制代码
  装完直接根据下面的写法来用就行了,只要你会用 vuex,你就等于你会用 pinia 的基本用法了,这边不展示 pinia 的插件写法

简单对比写法差异与共同点
  vuex 和 pinia 是同团队成员编写,但是 pinia 写法上更加人性化,也更简单
  vuex在vue3中的写法和用法
  1. // store.js
  2. import { createStore } from 'vuex'
  3. export default createStore({
  4.     // 定义数据
  5.     state: { a:1 },
  6.     // 定义方法
  7.     mutations: {
  8.         xxx(state,number){
  9.             state.a = number
  10.         }
  11.     },
  12.     // 异步方法
  13.     actions: { },
  14.     // 获取数据
  15.     getters: { getA:state=>return state.a }
  16. })
  17. // 在vue3中使用
  18. ‹template>
  19.     ‹div>
  20.         {{number}}
  21.         ‹button @click="clickHandle">按钮‹/button>
  22.     ‹/div>
  23. ‹/template>
  24. ‹script>
  25. import {useStore} from "vuex"
  26. export default {
  27.     setup(){
  28.         let store = useStore()
  29.         // ⭐⭐⭐ 如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化,或者使用getter,就可以不使用computed
  30.         let number = computed(()=>store.state.a)
  31.         const clickHandle = () => {
  32.             store.commit("xxx","100")
  33.         }
  34.         return{number,clickHandle}
  35.     }
  36. }
  37. ‹script>
复制代码
  pinia在vue3中的写法和用法
  1. // store.js
  2. import { defineStore } from 'pinia'
  3. // defineStore 调用后返回一个函数,调用该函数获得 Store 实体
  4. export const GlobalStore = defineStore({
  5.   // id: 必须的,在所有 Store 中唯一
  6.   id: "myGlobalState",
  7.   // state: 返回对象的函数
  8.   state: () => ({
  9.     a: 1,
  10.   }),
  11.   getters: {},
  12.   actions: {
  13.     setXXX(number) {
  14.       this.a = number;
  15.     },
  16.   },
  17. });
  18. // 在vue3中使用
  19. ‹template>
  20.     ‹div>
  21.         {{number}}
  22.         ‹button @click="clickHandle">按钮‹/button>
  23.     ‹/div>
  24. ‹/template>
  25. ‹script>
  26. import {GlobalStore} from "@/store/store.js"
  27. export default {
  28.     setup(){
  29.         let store = GlobalStore();
  30.         // ⭐⭐⭐ 如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化,或者使用getter,就可以不使用computed (这边和vuex是一样的)
  31.         let number = computed(()=>store.a)
  32.         const clickHandle = () => {
  33.             store.setXXX("100")
  34.         }
  35.         return{number,clickHandle}
  36.     }
  37. }
  38. ‹script>
复制代码
  由此两个代码的对比我们可以看出使用 pinia 更加的简洁,轻便。pinia 取消了原有的 mutations,合并成了 actions,且我们在取值的时候可以直接点到那个值,而不需要在.state,方法也是如此。

Vuex 和 Pinia 的优缺点
  Vuex的优点
       
  • 支持调试功能,如时间旅行和编辑   
  • 适用于大型、高复杂度的Vue.js项目
  Vuex的缺点
       
  • 从 Vue 3 开始,getter 的结果不会像计算属性那样缓存   
  • Vuex 4有一些与类型安全相关的问题
  Pinia的优点
       
  • 完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易   
  • 极其轻巧(体积约 1KB)   
  • store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见   
  • 支持多个Store   
  • 支持 Vue devtools、SSR 和 webpack 代码拆分
  Pinia的缺点
       
  • 不支持时间旅行和编辑等调试功能

何时使用Pinia,何时使用Vuex
  根据我的个人经验,由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目,因为一些调试功能,如时间旅行和编辑仍然不被支持。
  将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。

总结
  到此这篇关于vue3中vuex与pinia踩坑的文章就介绍到这了,更多相关vue3 vuex与pinia踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:30 , Processed in 0.070326 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表