使用Composition API做状态管理时reactive数据修改后视图不响应

1. 核心问题：你在store文件中使用的reactive来自独立的@vue/reactivity包，这个包是Vue剥离出的框架无关响应式核心，它的状态更新不会主动触发Vue组件的重新渲染。只有从vue包中导入的响应式API，才会绑定Vue的组件渲染上下文，更新时自动触发组件重渲染。
2. 次要问题：你导出的store外层是普通JS对象，即使内部的state是响应式的，模板直接跨普通对象访问嵌套的响应式属性时，也可能出现依赖收集遗漏的情况，进一步导致更新不触发。

你之前使用局部page ref可以正常工作，是因为你在调用修改state的方法后，手动给局部ref赋值了。这个ref是从vue包导入的，它的更新会触发组件重渲染，相当于你手动同步值触发了更新，而非store的state更新主动触发的。

按优先级从高到低选择即可：

方案1：修改store的API导入来源（推荐） #

将store中导入响应式API的语句改成从vue包导入：

// 替换原有导入语句
import { readonly, reactive } from "vue";

改完之后，state的更新就能主动触发组件重渲染，直接在模板中访问wordsInfo.state.page也能正常响应。

方案2：将外层store对象改为响应式 #

如果修改导入来源后仍存在问题，可以把导出的外层store对象也包裹为reactive，避免普通对象嵌套导致的依赖收集问题：

// store文件末尾修改导出逻辑
const store = reactive({ state, methods })
export default store

方案3：组件内用计算属性包裹state属性 #

如果不想修改store代码，可以在组件的setup中用计算属性包裹需要用到的state属性，保证响应式追踪：

// 组件setup内添加
const currentPage = computed(() => wordsInfo.state.page)

模板中直接用currentPage替代wordsInfo.state.page即可。

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