vue中使用Pinia和Vuex详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中使用Pinia和Vuex详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

以上可以看出 pinia更适合于Vue3中作为状态管理
vue中使用Pinia和Vuex详解,JavaScript,vue.js,前端,javascript

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状态管理了
vue中使用Pinia和Vuex详解,JavaScript,vue.js,前端,javascript
以上就是Pinia和Vuex详解感谢大家的阅读
如碰到其他的问题可以私下我一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客作者会持续更新…文章来源地址https://www.toymoban.com/news/detail-560868.html