vuex和pinia转态管理工具介绍

Smile_zxx

已于 2024-04-23 14:51:30 修改

阅读量660

点赞数 6

文章标签： vue.js

于 2024-04-22 17:13:03 首次发布

本文链接：https://blog.youkuaiyun.com/Smile_666666/article/details/138078916

版权

本文比较了Pinia和Vuex在Vue.js中的应用，强调了Pinia对Vue3的支持、TypeScript集成、轻量级设计、无Mutation等优点，同时提到了Vuex的模块管理和异步处理。还讨论了Pinia的使用注意事项，包括动态路由拦截和初始化问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、介绍

相同点：都是Vue.js的状态管理工具

不同点：

区别	Pinia	Vuex
支持	Vue2和Vue3都支持	Vue3写法需要额外配置
Mutation	只有 state, getter 和 action，无Mutation	action异步、Mutation 同步
action	action支持同步和异步	action异步、Mutation 同步
Typescript	良好的Typescript支持	需要额外的配置
模块嵌套	不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化	需要
模块嵌套	不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化	Vuex中如果数据过多，我们通常分模块来进行管理
模块嵌套	不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化，pinia中每个store都是独立的，互相不影响	Vuex中如果数据过多，我们通常分模块来进行管理
体积	体积非常小，只有1KB左右	体积大
插件扩展	支持插件来扩展自身功能	不能
服务端渲染	支持服务端渲染	不能

总结：pinia的优点

支持Vue3 和 Vue2，完整的 ts 的支持；
足够轻量，压缩后的体积只有1kb左右;
去除 mutations，只有 state，getters，actions；
actions 支持同步和异步；
代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的无需手动添加store，store 一旦创建便会自动添加；
支持插件来扩展自身功能|
支持服务端渲染

注意点

pina的使用，有时候动态路由一般需要在beforeEach中去做拦截处理，把后端传过来的路由数据存入，页面第一次也会去走一次router文件，由于pinia没有挂载到vue上面，导致报错，

问题: Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
这个问题代表当前正在使用pinia; 但是pinia 还没有挂载成功

做法就是新建一个js文件，然后在js文件创建初始化，然后导出，然后分别在main和使用路由守卫的地方去引入。

二、使用

1、pinia使用

安装

 npm install pinia@next

vue3项目下创建一个 Pinia store,例如counterStore.js

import {
    defineStore } from 'pinia';

export const useCounterStore = defineStore({
   
  id: 'counter',
  state: () => ({
   
    count: 0,
  }),
  getters: {
   
    doubleCount() {
   
      return this.count * 2;
    },
  },
  actions: {
   
    increment() {
   
      this.count++;
    },
    decrement() {
   
      this.count--;
    },
  },
});

引入 Pinia 到 Vue 应用中

// main.js
import {
    createApp } from 'vue'
import {
    createPinia } from 'pinia'
import App from './App.vue'
 
const app = createApp(App)
 
const pinia =<