首页 > 其他分享 >Vuex和Pinia

Vuex和Pinia

时间:2024-04-11 10:02:45浏览次数:11  
标签:Vue Pinia Vuex js TypeScript pinia vuex

一、区别         

  1. pinia它没有mutation,他只有state,getters,action【同步、异步】使用他来修改state数据。
  2. pinia默认也是存入内存中,如果需要使用本地存储,配置上比vuex麻烦一点。
  3. pinia语法比vuex更容易理解和使用,灵活。
  4. pinia没有modules配置,没一个独立的仓库,都是definStore生成出来的。
  5. pinia state是一个对象返回一个对象和组件的data是一样的语法。

二、优缺点

       Pinia

               【优点】:

      1. 完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易
      2. 极其轻巧(体积约 1KB)
      3. store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 - - Vuex 中很常见
      4. 支持多个Store
      5. 支持 Vue devtools、SSR 和 webpack 代码拆分

               【缺点】:

      1. 不支持时间旅行和编辑等调试功能

       VueX

               【优点】:

      1. 支持调试功能,如时间旅行和编辑

      2. 适用于大型、高复杂度的Vue.js项目

               【缺点】:

      1. 从 Vue 3 开始,getter 的结果不会像计算属性那样缓存

      2. Vuex 4有一些与类型安全相关的问题

三、业务场景       

        1、由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目,因为一些调试功能,如时间旅行和编辑仍然不被支持。

2、将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。

四、小结             pinia和vuex在vue2和vue3都可以使用,一般来说vue2使用vuex,vue3使用pinia

标签:Vue,Pinia,Vuex,js,TypeScript,pinia,vuex
From: https://www.cnblogs.com/xiaobaicai12138/p/18128149

相关文章

  • Vue3+TS+Vite+pinia
    一、创建项目    创建文件夹,然后cmd,输入以下内容。然后选择TS版本。npmcreatevite二、安装依赖   在vscode中,使用终端,输入命令 npmi三、安装其他插件    3.1、路由vue-router        多页面应用需要安装路由。所以需要使用v......
  • 跨框架探索:React Redux 和 Vuex 对比分析快速掌握React Redux
    ReactRedux和Vuex都是前端状态管理库,分别用于React和Vue.js框架。它们都提供了一套规范的状态管理机制,帮助开发者更好地组织和管理应用状态。下面是它们的一些异同点:相同点:中心化状态管理:两者都提供了一个全局的存储中心,使得组件间状态共享变得简单。响应式:状......
  • 前端【Vuex】【使用介绍】
    1、组件下载vue与vuex的版本对应关系: Vue2匹配的Vuex3 Vue3匹配的Vuex4Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。官方网......
  • vuex分了多个模块,利用语法糖调用不同模块里的方法
    //store/modules/a.jsexportdefault{state:{...},getters:{...},mutations:{...},actions:{...}}//store/modules/b.jsexportdefault{state:{...},getters:{...},mutations:{...},actions:{...}}//store/in......
  • 03_Pinia的使用
    官网:Pinia|TheintuitivestoreforVue.js(vuejs.org)Pinia是一个轻量级的状态管理库。Pinia可以处理大型项目中复杂的状态管理需求,而父传子、子传父以及跨组件通信,可以解决一些简单的状态传递问题。打开cmd转到当前项目目录下,安装命令:npminstallpinia 修改main.js......
  • Pinia - vue 的状态管理库
    Pinia-vue的状态管理库1.介绍Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。2.安装和注册Pinia安装piniayarnaddpinia注册piniaimport{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constpini......
  • 关于vue项目在使用vuex的时候,this.$store报错undefined的问题
    vue.runtime.esm.js?c320:4605[Vuewarn]:Errorinrender:"TypeError:Cannotreadpropertiesofundefined(reading'state')。这个问题的主要原因是vuex的版本高于vue的版本。如果vue使用2.XX,vuex的版本要低于4.XX."dependencies":{"axios":"^1.6......
  • Vue — Vue3.0状态管理工具Pinia
    一、什么是Pinia?Pinia是一个专门为Vue3设计的状态管理库。它的目标是提供一种简单、直观的方法来管理Vue应用的状态,同时充分利用Vue3的响应式系统和组合式API。Pinia主要特点包括:基于Vue3:Pinia是专门为Vue3设计的状态管理库,充分利用了Vue3的响应式系统......
  • Vuex的核心组成、版本问题及store.js的使用、 Vuex中存值、取值以及获取变量值、异步
    Vuex的核心组成、版本问题及store.js的使用、Vuex中存值、取值以及获取变量值、异步同步操作和Vuex后台交互  //store//初始值//设置值mutations  ---this.$store.commit('setDemoValue方法名',value); //更新值action --this.$store.disp......
  • vuex.esm.js:135 Uncaught Error: [vuex] getters should be function but “getters.
    报错vuex.esm.js:135UncaughtError:[vuex]gettersshouldbefunctionbut"getters.mode"inmodule"userModule"is"dark".atassert(vuex.esm.js:135:1)原因:在使用vuex的moulds时index.js中已创建了一个vue实例newVuex.Store,在模块文件中又再创建了一个,导致报......