Pinia 状态变量未更新？完整故障排除指南帮你搞定

javascript

2024-03-08 10:06:30

Pinia 状态更新故障排除指南

简介

在使用 Pinia 管理状态时，部分变量未更新的问题是一个常见痛点。本文将引导你一步步排查和解决此问题，提供详细的分析和实用解决方案。

数据类型验证

问题： 状态变量的类型与存储的数据类型不匹配。

解决方案： 使用 useLocalStorage 设置状态时，指定正确的类型。

引用检查

问题： 仅仅重新分配值而不是修改它，不会触发 Vue 更新。

解决方案： 使用 this.$set 显式设置值，以确保 Vue 检测到变化。

异步操作

问题： 在设置状态之前获取状态，可能会得到过时的值。

解决方案： 等待 Pinia action 执行完成后，再获取状态。

调试工具

问题： 调试状态管理遇到困难。

解决方案： 使用 Pinia Vue Devtools 扩展，以查看 store 状态并跟踪 actions 和 mutations 的执行。

代码示例

import { defineStore } from 'pinia'
import { useLocalStorage } from "@vueuse/core"

export const useExpertStore = defineStore('Expert', {
    state: () => ({
       name: useLocalStorage('name', 'string'),
       about_me: useLocalStorage('about_me', 'string'),
       ExpertEmail: useLocalStorage('ExpertEmail', 'string'),
       Experience: useLocalStorage('Experience', 'string'),
       field: useLocalStorage('field', 'string'),
       profile_picture: useLocalStorage('profile_picture', 'string'),
       rate: useLocalStorage('rate', 'number'),
       rating: useLocalStorage('rating', 'number'),
    }),
    getters: {
      getName: (state) => state.name ,
      getAboutMe: (state) => state.about_me ,
      getExpertEmail: (state) => state.ExpertEmail ,
      getExperience: (state) => state.Experience ,
      getField: (state) => state.field,
      getProfile_picture: (state) => state.profile_picture,
      getRate: (state) => state.rate ,
      getRating: (state) => state.rating ,
    },
    actions: {
      setExpert(name, about_me, email, experience, field, profile_picture, rate, rating) {
        this.$set(this, 'name', name)
        this.$set(this, 'about_me', about_me)
        this.$set(this, 'ExpertEmail', email)
        this.$set(this, 'Experience', experience)
        this.$set(this, 'field', field)
        this.$set(this, 'profile_picture', profile_picture)
        this.$set(this, 'rate', rate)
        this.$set(this, 'rating', rating)
      },
    },
  });