0
点赞
收藏
分享

微信扫一扫

阿里云无影云电脑价格_企业办公型1元_云桌面入口

分湖芝蘭 2023-07-18 阅读 44

最具有争议的Pinia和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详解感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…

举报

相关推荐

0 条评论