状态管理

刀刀

1/2/2025

0 字

0 分钟

使用

通过 Pinia 状态管理存储变量和方法，多个页面都可使用，可使用选项式与组合式两种方式。本项目采取组合式的形式，其代码如下所示：

import { ref } from 'vue';
import { defineStore } from "pinia";

export const useXxxxStore = defineStore('xxxxx', () => {
  const a = ref('')

  return {
    a
  }
})

持久化

通过插件 pinia-plugin-persistedstate 实现持久化的功能

• 引入第三方库

  yarn add pinia-plugin-persistedstate

• 入口文件引入

  import { createPinia } from 'pinia'
  import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
  
  const pinia = createPinia()
  app.use(pinia)
  pinia.use(piniaPluginPersistedstate)

• 使用

  import { ref } from 'vue';
  import { defineStore } from "pinia";
  
  export const useXxxxStore = defineStore('xxxxx', () => {
    const a = ref('')
  
    return {
      a
    }
  }, {
    persist: true
  })

现在数据发生变动后都会同步更新到本地存储中。

清空

在 attr.vue 模块中主要实现数据的增删改查，所修改的数据都保存在 pinia 内，因此当用户离开该页面再重新进入后数据依旧存在。现在需求是点击其他页面回来后数据是清空的状态。

在选项式 API 中打印获取到的 store ，可以看到有一个 $reset() 重置的方法，打印代码如下所示：

import { useCategoryStore } from '@/store/category.ts'

const categoryStore = useCategoryStore()
console.log(categoryStore)

打印效果如下所示：

但是使用了组合式 API setup 语法糖后无法使用该方法，使用后会报错。

解决方法：在入口文件中添加清空数据的方法支持，代码如下：

pinia.use(({ store }) => {
    const initialState = JSON.parse(JSON.stringify(store.$state));
    store.$reset = () => {
        store.$patch(initialState);
    }
})

为 $reset() 方法添加一个 $patch() 方法，括号内传入深拷贝的 $state 数据。案例代码中是通过 JSON 实现较为简单的深拷贝形式。

总结

通过第三方组件快速方便的实现状态管理的数据持久化；通过 $reset() 方法重置清空仓库内的数据。

如果组合式方法与 setup 语法糖导致方法不可用，需要添加方法支持。