Pinia优势
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
- Vue2 和 Vue3 都能支持
- 抛弃传统的 Mutation ,只有 state, getter 和 action ,简化状态管理库
- 不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化
- TypeScript支持
- 代码简介,很好的代码自动分割
Pinia 基本使用
初始化项目: npm init vite@latest
安装Pinia: npm i pinia
挂载Pinia
![]()
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 image.png
创建Store
![]()
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 image.png
使用Store
image.png![]()
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
解构store
当store中的多个参数需要被使用到的时候,为了更简洁的使用这些变量,我们通常采用结构的方式一次性获取所有的变量名
ES传统方式解构(能获取到值,但是不具有响应性)![]()
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 image.png
Pinia解构方法:storeToRefs
image.png![]()
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
Pinia修改数据状态
简单数据修改
简单数据直接通过在方法中操作 store.属性名 来修改
![]()
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 image.png
多条数据修改
通过基础数据修改方式去修改多条数据也是可行的,但是在 pinia 官网中,已经明确表示patch
$patch 方法可以接受两个类型的参数,函数 和 对象
- $patch + 对象
- $patch + 函数: 通过函数方式去使用的时候,函数接受一个 state 的参数,state 就是 store 仓库中的 state image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
通过action修改
- Store.actions中添加 changeState 方法 image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 - 组件方法调用 store.方法名 image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
Pinia中的Getters
Pinia 中的 getter 和 Vue 中的计算属性几乎一样,在获取 State值之前做一些逻辑处理
- getter 中的值有缓存特性,如果值没有改变,多次使用也只会调用一次
- 添加 getter方法 image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 - 组件内多次调用 image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 image.pngPinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
- getter 中不仅可以传递 state 直接改变数据状态,还可以使用 this 来改变数据 image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
store之间的相互调用
- 新建 store image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 - 在原 store 中引入 allanStore,并获取 moveList image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐 - 组件中使用 mainStore.getAllanStoreList image.png
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐