pinia 页面刷新数据丢了

523 阅读1分钟

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…

image.png

image.png