vue中使用Pinia和Vuex详解

最具有争议的Pinia和Vuex那个更好？

我们使用Vue2的时候，Vuex作为一个状态管理工具在组件中使用方便了很多。Vue3推出后，虽然相对于Vue2很多东西都变了，但是核心的东西还是没有变的，比如说状态管理、路由等等。实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。

以上可以看出 pinia更适合于Vue3中作为状态管理
在这里插入图片描述

Pinia的优点

pinia中只有state、getter、action，抛弃了Vuex中的Mutation
pinia中action支持同步和异步，Vuex不支持
Typescript支持，毕竟我们Vue3都推荐使用TS来编写
体积小，1KB左右。
pinia支持插件来扩展自身功能。
可以服务端渲染。
以上来看对于 Pinia的概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。

那么什么时候该用到Pinia呢

存储应该包含可以在整个应用程序中访问的数据。这包括在许多地方使用的数据，例如导航栏中显示的用户信息，以及需要通过页面保留的数据，例如一个非常复杂的多步骤表格。
简单的理解就是当我们需要在项目中需要全局管理一下数据就可以考虑使用
vue3+TS 更使用于使用pinia

使用Pinia

1.安装

yarn add pinia
# 或者使用 npm
npm install pinia

2.创建一个 pinia（根存储）并将其传递给应用程序：
一般是在 stores文件里
亿点小知识：如果使用 Vue 2，还需要安装组合 API：@vue/composition-api

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);export default pinia;

3.在main.js中引入pinia

import pinia from "@/stores";
app.use(pinia).mount("#app");

4.持久化策略这个如果不需要也不可以不设置

import { PersistedStateOptions } from "pinia-plugin-persistedstate";/*** @description pinia 持久化参数配置* @param {String} key 存储到持久化的 name* @param {Array} paths 需要持久化的 state name* @return persist* */
const piniaPersistConfig = (key: string, paths?: string[]) => {const persist: PersistedStateOptions = {key,storage: localStorage,// storage: sessionStorage,paths};return persist;
};export default piniaPersistConfig;

5.在stores中创建一个modules 用来区分

import { defineStore } from "pinia";
import { GlobalState } from "@/stores/interface";// TS 规范
import piniaPersistConfig from "@/config/piniaPersist";
export const useGlobalStore = defineStore({id: "geeker-global",// 修改默认值之后，需清除 localStorage 数据state: (): GlobalState => ({// 面包屑导航breadcrumb: true,// 面包屑导航图标breadcrumbIcon: true,// 标签页tabs: true,// 标签页图标tabsIcon: true,// 页脚footer: true}),getters: {},actions: {// Set GlobalStatesetGlobalState(...args: ObjToKeyValArray<GlobalState>) {this.$patch({ [args[0]]: args[1] });}},persist: piniaPersistConfig("geeker-global") // 持久化处理
});