pinia的独立维护，统一导出及持久化

目录

1.说明及示例

2.注意

---

1.说明及示例

在src下创建store文件夹，在store文件夹下创建index.js文件，内容如下：

import { createPinia } from "pinia";
// pinia的持久化
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// 将所有的store进行导入，进行统一管理
import { useChannelStore } from "./modules/channel/channelStore";
import { useCountStore } from "./modules/count/countStore";
import { useRoleStore } from "./modules/role/roleStore";const pinia = createPinia();pinia.use(piniaPluginPersistedstate);export default pinia;
// 导出所有的store，用于在其他地方进行导入
export {useChannelStore, useCountStore, useRoleStore}

在main.js中导入pinia示例并传递给应用，main.js内容如下：

import { createApp } from 'vue'
import pinia from '@/store'
import App from './App.vue'
// import '@/api/interceptor'const app = createApp(App);app.use(pinia)
app.mount('#app')

在store目录下创建modules目录，在modules下创建各个仓库，如下：

在channel文件夹下创建仓库

import { defineStore } from "pinia";
import { ref } from "vue";
export const useChannelStore = defineStore("channel", () => {// 声明数据const channel = ref({id: "",name: "",num: 0,});// 声明操作数据的方法const setChannel = (info) => {channel.value = info;};const getChannel = () => {return channel.value;};const clearChannel = () => {channel.value = { id: "", name: "", num: 0 };};// 声明getters相关return {channel,setChannel,getChannel,clearChannel,};
},
{persist:true
}
);

在count文件夹下创建仓库

import { defineStore } from 'pinia'
import { ref,computed } from "vue";
export const useCountStore = defineStore("count", () => {const count = ref(0);const add = ()=> {count.value++;}const  sub = ()=> {count.value--;}const clear = () =>{count.value = 0}const dubble = computed(() => count.value * 2);return {count,add,sub,dubble,clear};
},
{persist:true
}
);

在role文件夹下创建仓库

import {defineStore} from 'pinia'
import {ref} from 'vue'export const useRoleStore = defineStore('role',() =>{
const roles = ref([]);const getRoles = () =>{return roles;
}
const setRoles = (roleInfo) =>{roles.value.push(roleInfo)
}
const clearRoles = () =>{roles.value.length = 0
}return {roles,getRoles,setRoles,clearRoles
}
},
{persist:true
}
)

在store的index文件中对这些store进行统一的导入及导出，进行统一管理。

在各个画面中进行使用，直接从store文件夹中导入各个仓库即可，如下：

<template><div>测试useStore</div><div>数量 --- {{ count }} --- {{ dubble }}</div><button @click="add">加</button><button @click="sub">减</button><button @click="clear">清空</button><div>--------------------------------------</div><div>测试channelStore</div><div>频道信息 --- {{ channel }} --- {{ getChannel() }}</div><button @click="setCh">设置频道</button><button @click="clearChannel">清空频道</button><div>--------------------------------------</div><div>测试roleStore</div><div>角色信息 --- {{ roles }} --- {{ getRoles() }} </div><button @click="setRo">设置角色</button><button @click="clearRoles">清空角色</button>
</template>
<script setup>
import { ref } from 'vue'
import { useCountStore,useChannelStore,useRoleStore} from '@/store'
import { storeToRefs } from 'pinia'// 数量store
const countStore = useCountStore()
// 解构属性,需要通过storeToRefs来保持其响应式
const { count, dubble } = storeToRefs(countStore)
// 解构方法，则不需要，方法不需要响应式
const { add, sub, clear } = countStore// 频道store
const channelStore = useChannelStore()
const { channel } = storeToRefs(channelStore)
const { setChannel, getChannel, clearChannel } = channelStore// 角色store
const roleStore = useRoleStore()
const { roles } = storeToRefs(roleStore)
const { getRoles, setRoles, clearRoles } = roleStore// 设置频道
const setCh = () => {let num = Math.round(Math.random()*10)const channel = {id: num,name: num + '号频道',num: num};setChannel(channel)
}// 设置角色
const setRo = () => {const role = {id: 'admin',name: '管理员',level: 1}setRoles(role)
}</script>

2.注意

①store的解构

store中的属性必须通过storeToRefs方法进行解构，来保持其响应性。

store中的方法则不需要，直接解构就可以了。

②在项目中，需要在store文件夹下的index.js文件进行store的独立维护，然后再main.js中直接导入。

③需要在store文件夹下的index.js文件中进行所有仓库的统一管理，即导入所有的仓库，再进行导出，这样在其他画面中使用时直接从store中导入即可。

④pinia信息在画面刷新后会消失，可以通过pinia-plugin-persistedstate实现pinia的持久化

先进行安装，在store中进行配置，在各个仓库中进行配置，详细的参照官网：

快速开始 | pinia-plugin-persistedstate