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