Pinia
pinia与Vuex的对比
pinia的介绍
- 本质是一个状态管理库，用于跨组件，页面进行状态共享
- 用起来像组合式Api
- 与Vuex相比，pinia提供了更简单的Api，具有更少的仪式，提供了Composition-API风格的API
- 最重要的是，与TypeScript一起使用具有更可靠的类型推断支持
pinia与Vuex区别：
- mutation不再存在
- 更友好的TypeScript支持
- modules的嵌套结构不再存在
- 命名空间这些也不再存在
pinia的使用
- 安装pinia
npm i pinia
使用准备步骤一：新建文件导入pinia
使用准备步骤二：挂载pinia
创建pinia的Store
新建页面。创建对应的Store
- Store 是使用 defineStore() 定义的
- 并且它需要一个唯一名称，作为第一个参数传递
- 第一个参数是应用程序中 store 的唯一 id
- 这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools
- 也建议将返回的函数命名为 use… 是跨可组合项的约定
页面使用pinia的store
Pinia核心概念State
操作State一
- 为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。
重置state
- 你可以通过store上的$reset()方法将状态重置到其初始值
改变state
- 除了直接使用store.xxx++,修改store，还可以调用$patch()方法进行同时修改多个值
- 可以使用部分state对象同时修改应用多个更改
替换state
- 可以使用$state属性设置为新对象来替换整个Store
Pinia核心概念Getters
- 相当于Store的计算属性
- getters可以定义接收一个state作为参数的函数
直接使用
- 页面上直接使用即可
getters使用当前页面其他getters
- 通过this来访问到当前store实例上所以的其他属性
getters返回函数
###
<div>修改的getters：{
{
homeStore.fungetters(1) }}</div>
getters使用别的store的数据
Pinia核心概念Actions
- 相当于组件中的methods
- 可以使用defineStore（）中的action属性定义，并且他们非常适合定义业务逻辑
- 和getters一样，通过this访问
基本使用
异步请求
