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文件夹中导入各个仓库即可，如下：

2.注意

①store的解构

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

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

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

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

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

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

快速开始 | pinia-plugin-persistedstate