网站制作哪些,百度搜索引擎使用技巧,天津网站设计推荐刻,商丘网站开发公司目录
1.说明及示例
2.注意 1.说明及示例
在src下创建store文件夹#xff0c;在store文件夹下创建index.js文件#xff0c;内容如下#xff1a;
import { createPinia } from pinia;
// pinia的持久化
import piniaPluginPersistedstate from pinia-pl…
目录
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/interceptorconst 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 vueexport 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文件夹中导入各个仓库即可如下
templatediv测试useStore/divdiv数量 --- {{ count }} --- {{ dubble }}/divbutton clickadd加/buttonbutton clicksub减/buttonbutton clickclear清空/buttondiv--------------------------------------/divdiv测试channelStore/divdiv频道信息 --- {{ channel }} --- {{ getChannel() }}/divbutton clicksetCh设置频道/buttonbutton clickclearChannel清空频道/buttondiv--------------------------------------/divdiv测试roleStore/divdiv角色信息 --- {{ roles }} --- {{ getRoles() }} /divbutton clicksetRo设置角色/buttonbutton clickclearRoles清空角色/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
