一、Pinia简介和五大优势
Pinia 是 Vue.js 的轻量级状态管理库,官方网站:https://pinia.vuejs.org。
Pinia是vue生态里Vuex的替代者,一个全新的vue状态管理库。在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia。
那先来看看Pinia比Vuex好的地方,也就是Pinia的五大优势。
- 可以对Vue2和Vue3做到很好的支持,也就是老项目也可以使用Pinia。
- 抛弃了Mutations的操作,只有state、getters和actions.极大的简化了状态管理库的使用,让代码编写更加容易直观。
- 不需要嵌套模块,符合Vue3的Composition api ,让代码更加扁平化。
- 完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持,所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化,一定知道Vuex对TS的语法支持不是完整的(经常被吐槽)。
- 代码更加简洁,可以实现很好的代码自动分割。Vue2的时代,写代码需要来回翻滚屏幕屏幕找变量,非常的麻烦,Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割,pinia也同样继承了这个优点。
二、Pinia开发环境安装
pinia的安装指令:npm i pinia
如果通过以下步骤创建的vue项目就已经默认安装了pinia:
1、执行命令 npx nrm use taobao (npm的镜像服务器切换到国内的淘宝镜像,一台电脑执行一次即可)
2、npx create-vue vue-test 创建vue-test项目
3、cd vue-test 进入vue-test项目
4、npm i 安装依赖包
5、npm run dev 打开项目
如果创建好vue项目没有pinia的话在通过安装pinia的指令进行安装。
三、用Pinia的方式创建store文件
1.在main.js文件里引入并挂载Pinia
import { createPinia } from 'pinia'
引入之后,通过createPinia( )方法,得到pinia的实例,然后将Pinia挂载到Vue根实例上。
//注册Pinia插件
app.use(createPinia())
2.创建store状态管理库
直接在/src目录下,新建一个store文件夹。有了文件夹之后,再创建相关的store文件。
在这个文件里的代码,一般只做下面几件事:
- 定义状态容器(仓库)
- 修改容器(仓库)中的 state(状态数据)
- 仓库中的 action 的使用(修改状态:包括同步和异步,pinia 中没有 mutations)
- getters:类似于计算属性
第一步:定义状态容器(仓库)
import {defineStore} from "pinia";
export const useTodoStore=defineStore({
id:"todo",//id
state:()=>({//状态数据
}),
getters:{//计算属性
},
actions:{//方法
}
});
这段代码很像vue的小组件,这也是Pinia的优点。
- id属性:每个store文件都有唯一的一个id属性。
- state 属性: 用来存储全局的状态的,这里边定义的,就可以是为SPA里全局的状态了,是每个页面和组件都可以通过Pinia方法读取到的。
- getters属性: 用来监视或者说是计算状态的变化的,有缓存的功能。
- actions属性: 对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。
第二步:store文件创建之后就可以在里面写需要使用的state状态数据、gettres属性及actions属性。
3.在vue组件里读取store数据
在/src/components文件夹中新建一个.vue文件,使用步骤如下:
第一步:在<script setup></script>中引入store文件:
import {useTodoStore} from "@/stores/todo.js";
为了实现数据的双向绑定,通过store解构出来的state需要通过storeToRefs()修饰,所以要引入storeToRefs:import {storeToRefs} from "pinia";
第二步:实例化store:const store=useTodoStore();
第三步:
获取state或getters:
const{filterList,filter}=storeToRefs(store);
获取到state之后可以在组件中直接使用
获取actions:
const {deleteTodoList}=store;
方法可以直接获取,不需要修饰。
如果页面中有自定义的变量,需要通过ref修饰变成双向绑定的变量,此时需要引入ref写法如下:
引入:import {ref} from 'vue';
使用:const msg=ref("");//自定义变量
const changeTitle=(item)=>{//通过修改自定义变量的value值实现数据的双向绑定
item.title=msg.value;
item.edit=false;
msg.value="";
}
四、数据持久化
安装pinia-plugin-persistedstate插件可以辅助实现数据持久化功能。
1.安装指令:npm i pinia-plugin-persistedstate
2.使用
在main.js中引入:import persistedState from "pinia-plugin-persistedstate"
注册使用:app.use(createPinia().use(persistedState))
3.在对应的store文件里开启persist
persist: true,//开启数据缓存 与状态 方法并列写
数据默认存在 sessionStorage 里,并且会以 store 的 id 作为 key。