Vue3 Pinia中如何声明可存储null或对象的响应式变量？

核心问题解答 #

• 不需要声明完整对象结构：你完全不用在初始化时就定义后端返回的完整对象结构，Pinia（基于Vue3响应式系统）支持动态赋值，后续赋值接口返回的完整对象时，响应式追踪会自动生效。
• 可以声明同时存储null或对象的响应式变量：但要注意，reactive不能直接处理null或基本类型，得用ref来声明，同时通过TypeScript联合类型明确变量的取值范围。

修正后的代码示例 #

// 假设SubscriptionModel是你定义的接口类型
interface SubscriptionModel {
  id: number;
  name: string;
  // 其他业务字段...
}

export const useSubscriptionStore = defineStore("subscriptions", () => {
  // 用ref声明，类型为SubscriptionModel | null，初始值设为null
  const currentSubscription = ref<SubscriptionModel | null>(null);

  async function loadSubscription(subscriptionId: number) {
    const { $api } = useNuxtApp();

    const { data } = await useAsyncData(() =>
      $api.subscriptions.getSubscription(subscriptionId),
    );
    // 直接赋值即可，Vue3的Proxy响应式系统会自动追踪变化
    currentSubscription.value = data.value;
  }

  // 记得把currentSubscription返回出去，供组件使用
  return {
    currentSubscription,
    loadSubscription,
  };
});

关于Vue2中Vue.set的替代 #

在Vue3/Pinia的响应式系统里，因为底层用的是Proxy，直接赋值新对象或修改对象属性都能被自动追踪，不需要像Vue2那样用Vue.set来处理响应式更新。只有当你给已存在的响应式对象添加全新的深层属性时，才需要额外处理，但你的场景是直接替换整个currentSubscription的值，所以直接赋值就足够了。

内容的提问来源于stack exchange，提问作者xTheWolf