pinia的具体使用以及如何实现持久化存储

181 阅读2分钟

1.1. 核心概念

下载命令:npm install pinia

Pinia 从使用角度和之前的 Vuex 几乎是一样的,比 Vuex 更简单了Store(如 Pinia)是一个保存状态和业务逻辑的实体,它不绑定到您的组件树。换句话说,它承载全局 state。它有点像一个始终存在的组件,每个人都可以读取和写入。它有三个核心概念

1.1. Pinna与Vuex<=4有很大的不同

1:没有mutations。mutations被认为是非常冗长的。最初带带来了devtools集成,但这不再是问题。

2:不再有模块的嵌套结构。您仍然可以通过在另一个store中导入和使用store来隐式嵌套store,但Pinia通过设计提供扁平结构,同时仍然支持store之间的交叉组合方式。您甚至可以拥有st tore的循环依赖关系。

3:更好 typescript 支持。无需创建自定义的复杂包装器来支支持TypeScript,所有内容都是类型化的,并且API的设计方式尽可能地利用TS类型推断。

4:不再需要注入、导入函数、调用它们,享受自动补全!

5:无需动态添加stores,默认情况下它们都是动态的,您甚至不会注意到。请注意,您仍然可以随时手动使用store 来注册它,但因为它是自动的,所以您无需担心。

6:没有命名空间模块。鉴于store的扁平架构,“命名空间”st ore是其定义方式所固有的,您可以说所有stores都是命名空间的。

使用在项目中找到store下面的index.ts文件

image.png

在main.ts中注册

image.png

页面中使用

image.png

修改数据

image.png

image.png

计算属性使用

image.png

pinia实现持久化存储

固化插件使用

image.png

image.png