Vue3使用Composition API构建简易状态仓库遇无响应问题求助

你的问题核心在于对Vue响应式API的使用方式存在误区，以下是具体原因和修正方案：

常见错误场景 #

1. 错误解构导致响应式丢失
   若在组件中直接解构testString或testObject的属性，比如：

   const { testString } = useStore();
   // 或对reactive对象直接解构
   const { abc } = testObject;
   

   前者如果是ref，直接引用对象没问题，但如果把testString.value赋值给普通变量，就会失去响应式；后者解构reactive对象的属性会直接拿到原始值，不再具备响应式特性。

2. 模板中错误引用ref值
   Vue3模板会自动为ref解包，如果你在模板里写{{ testString.value }}，反而会显示[object Object]，正确写法是直接用{{ testString }}。

正确实现方式 #

方式一：直接导出单例状态 #

store.mjs代码可保持不变：

import { ref, reactive } from 'vue';

export const testString = ref("abc");
export const testObject = reactive({ abc: 1, xyz: 2 });

组件中正确使用：

import { testString, testObject } from './store.mjs';

// 修改响应式值
const updateData = () => {
  testString.value = 'def';
  testObject.abc = 3;
}

模板：

<template>
  <p>{{ testString }}</p>
  <p>{{ testObject.abc }}</p>
  <button @click="updateData">修改状态</button>
</template>

方式二：封装为useStore函数（单例模式） #

如果要仿照Pinia的函数风格，需确保状态是模块级单例（仅初始化一次）：

import { ref, reactive } from 'vue';

// 模块作用域定义状态，保证单例
const testString = ref("abc");
const testObject = reactive({ abc: 1, xyz: 2 });

export default function useStore(){
   return { testString, testObject }
}

组件中若需解构reactive对象的属性，用toRefs保持响应式：

import useStore from './store.mjs';
import { toRefs } from 'vue';

const { testString, testObject } = useStore();
// 将reactive对象转为ref集合，解构后仍保持响应式
const { abc, xyz } = toRefs(testObject);

const updateData = () => {
  testString.value = 'def';
  abc.value = 3; // 修改ref值会同步到原reactive对象
}

关键注意点 #

• ref值在脚本中必须通过.value访问/修改，模板中自动解包无需加.value；
• reactive对象不能直接解构或展开，否则会丢失响应式，需用toRefs或toRef转换；
• 模块级定义的状态是单例，所有组件导入的都是同一个引用，确保状态同步。

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