pinia的使用

前言

最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。

使用方法

1. 安装pinia:

npm i pinia

2. main.js中引入pinia:

//main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')

3. 创建store仓库：

• 在src下创建store目录，目录下创建index.js文件:
  

• 在index.js中利用pinia的defineStore方法创建仓库，一般使用只会用到defineStore的前两个参数(第三个参数可做持久化配置)，下面是setup组合式写法(你也可以改为选项式写法)。

• 第一个参数为一个字符串，作为仓库的唯一id；第二个参数为一个方法，内部可定义需要存储的数据，定义完成后返回即可，你可以在此处定义多个数据，也可在defineStore之外多次使用defineStore创建多个仓库。

• 定义的时候有几个取巧的办法：可以使用ref给数据添加响应式特性。只需定义set方法，无需定义get方法。

// /store/index.js
import { defineStore } from "pinia";
import { ref } from "vue";
export const piniaStore = defineStore(
    "piniaStore",
    () => {
        const pageData = ref(1);//页面数据
        const setPageData = () => {
            pageData.value = pageData.value * 2;
        };//设置页面数据
 
        return {
            pageData,
            setPageData
        };
    },
);

4. 页面使用

• 使用仓库前必须先引入仓库创建store。
• 获取仓库数据可借助计算属性computed直接取出。
• 修改仓库数据可直接调用返回的对应set方法即可，此处方法没有传参直接在仓库内部修改的数据，你也可以传参使用外部数据修改。

<template>
		<h1>{{ pageData }}</h1>
		<button @click="setData">设置数据</button>
</template>
<script setup>
import { computed } from 'vue';
import { piniaStore } from '@/store/index.js';
let store = piniaStore(),//获取仓库
  	pageData = computed(() => {
    	return store.pageData;//获取仓库中的数据
  	});
const setData = () => {
	store.setPageData();//设置仓库中的数据
};
</script>

点击前页面显示：

点击后页面显示：

• 到此处其实你就已经学会使用pinia了，比vuex简单多了吧？但我当前项目需要对数据进行持久化处理，不处理页面刷新之后数据全部会重置，无法保存状态。

持久化

• 其实可以直接使用sessionStorage或localstorage实现前端数据持久化。
• 但数据一旦多了，你会发现代码里面全是setItem、getItem，会有大量的重复代码。
• 有人说直接封装不久得了？就像这样：

//storeTools.js
//写入仓库
export const setStore = (key, value) => {
    sessionStorage.setItem(key, JSON.stringify(value));
}
//读取仓库
export const getStore = (key) => {
    return JSON.parse(sessionStorage.getItem(key));
}
//清除所有仓库
export const clearStore = () => {
    sessionStorage.clear();
}

• 当然你也可以这样做，但在有轮子的情况下，我还是倾向于直接用轮子的，况且轮子提供的功能远比自己封装的方法多。
• 下面是pinia的持久化步骤：

1. 安装插件：

npm i pinia-plugin-persistedstate

2. main.js引入插件:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);//pinia持久化
app.use(pinia);
app.mount('#app')

3. pinia配置插件，其实就是利用pinia中defineStore方法的第三个参数，直接传入一个对象persist，对象中enabled表示启用持久化，storage表示持久化方式(可选sessionStorage、localstorage)：

import { defineStore } from "pinia";
import { ref } from "vue";
export const piniaStore = defineStore(
    "piniaStore",
    () => {
        const pageData = ref(1);//页面数据
        const setPageData = () => {
            pageData.value = pageData.value * 2;
        };//设置页面数据
 
        return {
            pageData,
            setPageData
        };
    },
    {
        persist: {
            enabled: true,
            storage: sessionStorage,
        }
    }
);

4. 现在再操作页面后，数据会保存在sessionStorage中，刷新数据不会重置丢失。
   

结语

其实vuex也有自己的持久化方法，但我还是倾向于pinia，毕竟更简洁方便了。
原文链接：https://xiblogs.top/?id=64