TypeScript适用编码介绍

Pinia优点

Pinia是一个全新的Vue状态管理库，是Vuex的取代者，尤雨溪强悍强烈推荐

0. Vue2 和 Vue3 都可以适用
1. 抛下传统 Mutation ，仅有 state, getter 和 action ，简单化状态管理库
2. 不用嵌入控制模块，合乎 Vue3 的 Composition api，让编码扁平化设计
3. TypeScript适用
4. 编码介绍，非常好的编码自动分割

Pinia 基本上应用

复位新项目： npm init vite@latest

组装Pinia: npm i pinia

初始化Pinia

建立Store

应用Store

结构store

当store里的好几个主要参数值得被应用过的情况下，能够更简约的使用这个自变量，大家一般采用构造的形式一次性获得每一个用户标识符

ES传统式方法结构(能掌握到值，但不具备响应性)

Pinia结构方式：storeToRefs

Pinia修改代码情况

简易数据修改

简易数据信息先通过在方式中实际操作 store.属性名 来改动

好几条数据修改

根据基本数据修改方式来改动好几条数据信息也是合理的，但在 pinia 官方网站中，早已已经确定$patch 的方法是通过改善的，会加速改动速率，对特性有非常大的益处，因此在开展好几条数据修改时，更建议使用 $patch

$patch 方式能接受2个种类的参数，函数公式 和 目标

• $patch 目标
• $patch 函数公式： 根据函数公式方式来使用时，函数公式接纳一个 state 的参数，state 便是 store 库房里的 state

根据action改动

• Store.actions中加入 changeState 方式

  

• 部件方法调用 store.方法名

  

Pinia里的Getters

Pinia 里的 getter 和 Vue 里的计算属性几乎一样，在获得 State值之前做过一些逻辑性解决

0. getter 里的值有缓存文件特点，假如值没有变化，多次使用也就只能启用一次

   • 加上 getter方式

   

   • 部件内数次启用

   

   

1. getter 中不但可以传送 state 立即更改数据状态，还可以使用 this 来调节数据信息

   

store之间的相互启用

在 Pinia 中，还可以在一个 store 中 import 另外一个 store ，再通过启用引进 store 方式的方式，获得引进 store 状态

• 新创建 store

• 在原有 store 中引进 allanStore，并获取 moveList

• 部件中应用 mainStore.getAllanStoreList

汇总

总的来说，Pinia 便是 Vuex 的取代版，能够更好的适配 Vue2，Vue3及其TypeScript。在Vuex的前提下去除了 Mutation，只留了 state, getter和action。Pinia拥有更多简约的词法， 扁平化的编码编辑，合乎Vue3 的 Composition api