pinia和vuex的区别

文章目录

介绍
安装
- pinia安装
- vuex安装
创建
- pinia创建
- vuex创建
两者写法对比
- pinia在vue3中的写法和用法
- vuex在vue3中的写法和用法
Vuex 和 Pinia 的优缺点
- Pinia的优点
- Pinia的缺点
- Vuex的优点
- Vuex的缺点
何时使用Pinia，何时使用Vuex

介绍

Pinia 是 Vue.js 的轻量级状态管理库，它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
Vuex也是为Vue框架建立的一个流行的状态管理库，它也是Vue核心团队推荐的状态管理库。 Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与redux相同的流量架构。

安装

pinia安装

pinia很容易上手，因为他只需要安装和创建一个store

安装命令：

yarn add pinia@nextnpm install pinia@nextcnpm install vuex@next --save-

设置为全局对象，在main.js中引用

import { createPinia } from "pinia";
// 创建pinia实例
const pinia = createPinia()
app.use(pinia)

vuex安装

Vuex 也很容易，需要安装和创建store。

npm install vuex@next --saveyarn add vuex@next --savecnpm install pinia@next

在根目录下引用

import {useStore} from './store'
app.use(store)

创建

pinia创建

// stores/todo.js
import { defineStore } from 'pinia'export const useTodoStore = defineStore({id: 'todo',state: () => ({ count: 0, title: "Cook noodles", done:false })
})

vuex创建

//store.js
import {createStore} from 'vuex'
const useStore = createStore({state: {todos: [{ id: 1, title: '...', done: true }]},getters: {doneTodos (state) {return state.todos.filter(todo => todo.done)}}
})

两者写法对比

vuex 和 pinia 是同团队成员编写，但是 pinia 写法上更加人性化，也更简单

pinia在vue3中的写法和用法

// store.js
import { defineStore } from "pinia"// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({// id: 必须的，在所有 Store 中唯一id: "myGlobalState",// state: 返回对象的函数state: () => ({a: 1,}),getters: {},actions: {setXXX(number) {this.a = number;},},
});// 在vue3中使用
<template><div>{{number}}<button @click="clickHandle">按钮</button></div>
</template>
<script>
import {GlobalStore} from "@/store/store.js"
export default {setup(){let store = GlobalStore();//如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed (这边和vuex是一样的)let number = computed(()=>store.a)const clickHandle = () => {store.setXXX("100")}return{number,clickHandle}}
}
<script>

vuex在vue3中的写法和用法

// store.js
import { createStore } from "vuex"export default createStore({// 定义数据state: { a:1 },// 定义方法mutations: {xxx(state,number){state.a = number}},// 异步方法actions: { },// 获取数据getters: { getA:state=>return state.a }
})// 在vue3中使用
<template><div>{{number}}<button @click="clickHandle">按钮</button></div>
</template>
<script>
import {useStore} from "vuex"
export default {setup(){let store = useStore()//如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computedlet number = computed(()=>store.state.a)const clickHandle = () => {store.commit("xxx","100")}return{number,clickHandle}}
}
<script>

由此两个代码的对比我们可以看出使用 pinia 更加的简洁，轻便。pinia 取消了原有的 mutations，合并成了 actions，且我们在取值的时候可以直接点到那个值，而不需要在.state，方法也是如此。

Vuex 和 Pinia 的优缺点

Pinia的优点

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

Pinia的缺点

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

Vuex的优点

支持调试功能，如时间旅行和编辑
适用于大型、高复杂度的Vue.js项目

Vuex的缺点

从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
Vuex 4有一些与类型安全相关的问题

何时使用Pinia，何时使用Vuex

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

pinia和vuex的区别相关推荐

pinia与vuex的区别以及pinia的使用
###pinia 与 vuex 的区别 pinia 的优点 : 完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易极其轻巧(体 ...
各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别
cookie 存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销:但如果这些数据是每个请求都需 ...
vue3使用Pinia进行全局状态管理，Pinia安装和使用，Pinia 和 Vuex的对比
介绍--为什么要使用 Pinia? Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态. 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export c ...
pinia——打败vuex的新一代vue存储库
Vuex与Pinia的使用与其持久化以及两者之间的差别
vuex在vue3的简单使用 index.js文件import { createStore } from 'vuex' export default createStore({state: {num: ...
什么是Pinia？以及它的使用方式？以及和Vuex的区别是什么？
文章目录概要什么是Pinia? Pinia和Vuex的区别? Pinia相比于Vuex的优势? 为什么要使用Pinia? Pinia的简单使用安装(仅限于Vue3) 使用概要提示:下边是Pi ...
Vue状态管理--Pinia使用详解
一.Pinia概述 Pinia开始于大概2019年,最初作为一个实验为Vue重新设计状态管理,让它用起来像组合API. Pinia本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享(这点和Vu ...
Vue3.0 状态管理库Pinia的前世今生
文章目录什么是 Pinia 呢? Pinia 和 Vuex 的区别在哪里? 与Vuex相比,Pinia所拥有的那些优势如何安装与使用Pinia 什么是 Pinia 呢? Pinia是Vue3版本的 ...
Vue3状态管理库——Pinia
什么是 Pinia Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享. pinia 与 vuex 的区别: 更友好的TypeScript支持,Vuex之前对 ...