如何在Vue3组件中显示组合式函数的state更新值？

你的核心问题是组件代码写法与你使用的API风格不匹配，导致ref的更新没有被组件的响应式系统追踪到。以下是针对两种API风格的修复方案：

方案1：继续使用Options API #

修改组件的<script>部分，通过setup选项调用组合式函数并返回响应式的state，确保它被纳入组件的响应式系统：

<template>
    <span> state: {{ state }}</span>
</template>

<script>
import { useStates } from '../xx/xx/xxx/test.js';

export default {
  setup() {
    const state = useStates();
    return { state };
  }
}
</script>

方案2：改用Composition API（推荐） #

如果可以切换到Vue3推荐的Composition API写法，只需给<script>添加setup属性即可，顶层声明的变量会自动暴露给模板：

<template>
    <span> state: {{ state }}</span>
</template>

<script setup>
import { useStates } from '../xx/xx/xxx/test.js';
const state = useStates();
</script>

额外提示 #

你的test.js里存在拼写错误：not-satrted应为not-started，虽不影响功能，但建议修正以避免歧义。

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