vue3 pinia入门实践

2022-01-07

pinia 是什么

pinia 是由 Vue 团队的核心成员维护和开发的新一代状态管理器。同样重要的是 Pinia 非常轻巧，只有 1kb 大小。 Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 从上面官网的解释不难看出，pinia 和 Vuex 的作用是一样的，它也充当的是一个存储数据的作用，存储在 pinia 的数据允许我们在各个组件中使用。 Pinia 现在也是 Vue 的推荐选择，现在是整个 Vue 生态系统的官方组成部分，如果你去过 Vue 社区，你就会知道在谈论状态管理时首选的选择是 Vuex，并且社区一直很乐意使用它，那么为什么我们实际上需要 Pania？

vuex 与 pinia 比较

Pinia 解决了 Vuex 的许多问题。API 更简单，如果你在 Vue3 中使用过 composeables，那么 Pinia 会感觉非常熟悉。它比 Vuex 需要更少的引导和设置，Pinia 还提供开箱即用的 Typescript 支持，并且由于 Pinia 的构建方式，您可以在 IDE 中获得更好的代码完成！ store 的操作是作为常规函数调用调度的，而不是使用调度/提交方法或 MapAction/MapMutation 辅助函数，这在 Vuex 中很常见。这也意味着在调用动作时，您不必像在 Vuex 中那样依赖传递字符串值！ 没有 mutations 需要大量的样板代码维护 mutations。 没有 mapActions

Pina 的优势

pinia

• 有没有 mutations
• 更好的 typescript 支持
• 不需要注入、导入函数、调用时会自动补全，无需动态添加 stores
• 没有命名空间，有 Vue 专用开发工具 Vue DevTools 支持

核心概念

Pinia 从使用角度和之前的 Vuex 一样。Store 是保存状态与业务逻辑的实体，有三个核心概念。

• state 存储全局状态
• getters 类似于组件的 computed，根据已有 state 封装派生数据，也具有缓存的特性
• actions 类似于组件的 methods,用来封装业务逻辑，支持同步和异步

内置函数介绍

主要函数storeToRefs storeToRefs $path、

defineStore 定义容器

defineStore(arg1, arg2);

参数 1：是对仓库的命名，名称必须具备唯一性； 参数 2：配置的选项对象，即 state、getters、actions，其中 state 的写法必须是函数，为了避免在服务端交叉请求导致的状态数据污染，而且必须是箭头函数，为了更好的 TS 类型推导。

import { defineStore } from "pinia";
export const useApp = defineStore("app", {
  state: () => {
    return {};
  },
  getters: {},
  actions: {},
});

storeToRefs()函数读取 state

使用 storeToRefs()将 state 中的状态解构出来，方便在视图中使用，storeToRefs 函数可将普通数据变成响应式数据。

import { storeToRefs } from "pinia";
const { count, name, arr, count10 } = storeToRefs(mainStore);

结论

我应该使用 Vuex 将我的项目升级到 Pinia 吗？这是非常个人化的事情，但老实说，对于一个正在生产中并使用 Vuex 在 Vue 2 中开发的应用程序，我不会急于实现新库。 对于一个不会获得新功能但主要是维护的项目，我认为 Pania 的优势无法弥补迁移的成本。 如果一个项目的开发阶段很长或者还没有进入最后阶段，考虑从 Vuex 迁移到 Pinia 可能会非常有趣。 但是，如果它是一个新项目，它绝对是我的选择，因为它提供了所有优势。更重要的是，我认为它会省去很多麻烦。再加上将要使用 TypeScript 的事实，Pinia 几乎是必须的。 对于熟悉 Vuex 的人来说，这不会是一个陡峭的学习曲线。