目录
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中进行配置，在各个仓库中进行配置，详细的参照官网：
