Vue Composition API构建全局状态修改后DOM未更新问题排查

你当前写的useProducts是普通组合式函数，每次被组件调用时，都会在函数内部重新创建独立的reactive状态实例：

• app.vue调用useProducts()拿到的changeTitle，修改的是app.vue对应的专属状态
• catalog.vue调用useProducts()拿到的title，属于另一个完全独立的状态实例
  二者状态不共享，自然不会同步更新。

把全局共享的状态提到组合式函数外部，保证全局只有一份状态实例即可，修改useProducts.js代码如下：

import { reactive, toRefs} from "vue";

// 状态定义在函数外部，全局仅初始化一次，所有组件共享同一份
const state = reactive({
  title: "old title"
});

export default function useProducts() {
  const changeTitle = function (title) {
    state.title = title;
    console.log(state.title, "the state changed here");
  }

  return {
    ...toRefs(state),
    changeTitle,
  };
}

修改后所有组件调用useProducts()访问的都是同一份响应式状态，调用changeTitle后所有引用title的组件都会自动更新DOM。

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