如何在Vue 3/Nuxt 3中让导出变量具备响应式特性？

问题根源 #

你导出的count是普通JavaScript对象，并非Vue的响应式代理对象。即便在组件中用ref(count)包裹，也仅将对象引用作为ref的值，当直接修改原始count.total时，Vue无法追踪普通对象内部属性的变化，因此模板不会实时更新。

方案一：工具文件内直接创建响应式对象（推荐，适合全局共享状态） #

将工具文件中的普通对象用reactive包裹，直接导出响应式对象，确保所有对其属性的修改都能被Vue追踪：

修改/assets/functions/test.js：

import { reactive } from 'vue';

// 用reactive创建响应式对象
export const count = reactive({
  total: 0,
});

export const addCount = () => {
  count.total++;
};

组件中直接导入使用，无需额外处理：

<template>
  <h1>{{ count.total }}</h1>
  <button @click="addCount()">Add+</button>
</template>

<script setup>
import { count, addCount } from '~/assets/functions/test';
</script>

说明：reactive会将对象转化为响应式代理，修改其属性时Vue会自动触发模板更新，这种方式适合需要在多个组件间共享状态的场景。

方案二：组件内将普通对象转为响应式（适合仅当前组件使用） #

若不想修改工具文件，可在组件内将导入的普通对象转为响应式代理，同时修改操作逻辑指向响应式对象：

<template>
  <h1>{{ reactiveCount.total }}</h1>
  <button @click="handleAdd">Add+</button>
</template>

<script setup>
import { count, addCount as originalAddCount } from '~/assets/functions/test';
import { reactive } from 'vue';

// 将普通对象转为响应式代理
const reactiveCount = reactive(count);

// 修改响应式对象的属性以触发更新
const handleAdd = () => {
  reactiveCount.total++;
  // 若需同步更新原始对象，可保留原始方法调用
  // originalAddCount();
};
</script>

说明：此方式仅在当前组件内实现响应式，若其他地方使用原始count对象，两者状态会出现不一致，因此仅适用于该组件单独使用该变量的场景。

原方案无效的原因 #

你之前使用ref(count)时，ref对对象类型会内部调用reactive处理，但你修改的是原始的count对象而非ref.value指向的响应式代理，因此Vue无法感知属性变化。若坚持使用原结构，需修改addCount来操作ref.value，但这种方式不如上述方案清晰规范。

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