vue状态管理工具

一、Pinia简介和五大优势

Pinia 是 Vue.js 的轻量级状态管理库,官方网站：https://pinia.vuejs.org。

Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。在Vue3成为正式版以后，尤雨溪强势推荐的项目就是Pinia。
那先来看看Pinia比Vuex好的地方，也就是Pinia的五大优势。

1. 可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。
2. 抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
3. 不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
4. 完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。
5. 代码更加简洁，可以实现很好的代码自动分割。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文件。

在这个文件里的代码，一般只做下面几件事：

1. 定义状态容器(仓库)
2. 修改容器(仓库)中的 state（状态数据）
3. 仓库中的 action 的使用（修改状态：包括同步和异步，pinia 中没有 mutations）
4. 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文件，使用步骤如下：

第一步：在中引入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。