pinia页面刷新,数据丢失了,有个插件pinia-plugin-persistedstate可以把数据存在localStorage或者sessionStorage里。
// 引入piniaPluginPersistedstate
import type { App } from 'vue'
import { createPinia } from 'pinia'
import { resetSetupStore } from './plugins'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
/** setup vue store plugin: pinia. - [安装vue状态管理插件:pinia] */
export function setupStore(app: App) {
const store = createPinia()
store.use(piniaPluginPersistedstate)
store.use(resetSetupStore)
app.use(store)
}
export * from './modules'
export * from './subscribe'
export const useBuildingStore = defineStore('buildingStore', {
state: () => ({
buildingList: [] as any[], // Adjust the type according to your data structure
selectTenantId: '', // 选择租户
onlineObj: {} as OnlineObj, // 设备在线情况
}),
actions: {
async fetchBuildingList() {
try {
const { data }: { data: any } = await getBuildingList({
pageSize: 9999,
pageNum: 1,
})
this.buildingList = data.list
} catch (error) {
console.error('Error fetching building list:', error)
}
},
setSelectTenantId(val: string) {
this.selectTenantId = val
},
setOnlineObj(val: any) {
this.onlineObj = val
},
},
persist: {
// 默认存在localStorage
storage: sessionStorage,
paths: ['onlineObj'], // 默认会存所有的state
},
})
刷新页面后数据不会丢失
参考链接
prazdevs.github.io/pinia-plugi…
github.com/prazdevs/pi…