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 GlobalState
    setGlobalState(...args: ObjToKeyValArray<GlobalState>) {
      this.$patch({ [args[0]]: args[1] });
    }
  },
  persist: piniaPersistConfig("geeker-global") // 持久化处理
});

以上就是简单的使用 Pinia状态管理了

以上就是Pinia和Vuex详解感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…