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