Pinia的数据持久化和数据监听

pinia刷新数据持久存储

pinia的数据是不会持久存储的，当页面刷新后，pinia中的数据会丢失，所以我们需要使用额外的手段，将pinia中的数据持久化存储，使得页面刷新后数据还在。

安装 pinia-plugin-persist

npm i pinia-plugin-persist

修改项目的main.ts文件

import { createApp } from "vue"
import App from "./App.vue"
import pinia from '@/store/index'
import piniaPluginPersist from 'pinia-plugin-persist'
const app = createApp(App);

pinia.use(piniaPluginPersist)
app.use(pinia)

修改你需要持久化存储的pinia文件

import { defineStore } from "pinia"

export const useUserInfoStore = defineStore("userInfo", {
  state: (): any => ({
    userInfos: {
      userName: "",
      photo: "",
    },
    book: "",
  }),
  actions: {},
  persist: {
    enabled: true, // 开启数据缓存-默认缓存全部数据
    // strategies: [
    //   {
    //     key: 'user', // 这个 Store 将被持久化存储在 localStorage 中的 user 中。
    //     storage: localStorage,  // 选择存储方式
    //     paths: ['userInfos.userName', 'book']  // 设置state中需要缓存的数据
    //   }
    // ]
  }
})

在store文件设置持久缓存后，对应页面使用即可，页面刷新数据不会丢失。

监听整个state发生的变化

参考：https://pinia.vuejs.org/zh/core-concepts/state.html#subscribi...

// 监听菜单变化
menu.$subscribe((mutation, state) => {
  console.log('store监听',mutation, state);
}, { detached: true })

监听state中某个值的变化

这里需要使用storeToRefs让数据保持响应

<script setup>
import { useMenuStore } from '@/store/menu'
import { storeToRefs } from 'pinia'
const menu = useMenuStore();
const { breadcrumb } = storeToRefs(menu);

// 只监听pinia中某一个值的变化
watch(() => breadcrumb.value, (newValue, oldValue) => {
    console.log(newValue, oldValue,'监听某个值');
})
</script>

注意事项

有些东西能不要用pinia就不要用，store的作用主要是全局状态管理、全局数据共享，这种数据在全局流动会占用内存，如果做修改也会更改对应的全局数据，所以这个需要注意。使用的部分场景举例：用户信息、路由信息、全局菜单信息、权限字符等。