观看 Vue 3 全局变量的变化答案

【问题标题】：Watch Vue 3 global variable for changes观看 Vue 3 全局变量的变化
【发布时间】：2023-11-30 16:10:01
【问题描述】：

我在我的main.ts 文件中设置了一个提供程序：

app.provide('currentPage','test1')

然后将其注入到组件中Home.vue:

inject: ['currentPage'],

然后我可以使用{{ currentPage }} 更新它并在该组件中显示它而不会出现问题。

但我希望另一个组件 DeepNestedComponent.vue 能够对其进行编辑，并且 Home.vue 能够了解更改。

当我在DeepNestedComponent.vue 中注入相同的提供程序时，我可以在组件中进行编辑和显示，但Home.vue 不知道更改并且{{ currentPage }} 仍然显示'test1'。

我该怎么做？

【问题讨论】：

标签： vue.js vuex vuejs3 vite

【解决方案1】：

此模式仅设计用于将祖父组件的某些属性传递给孙子组件，您的案例需要基于 Vuex 的可共享状态或可组合函数，让我们基于第二种方法构建解决方案：

定义可组合函数：

usePagination.ts

import {  ref } from "vue";

const currentPage=ref('test')

export default function usePagination(){

  function setCurrentPage(val:string){
      currentPage.value=val;
 }

return {currentPage, setCurrentPage}
}

DeepNestedComponent.vue

import usePagination from './usePagination'
...
setup(){
  const { setCurrentPage} =usePagination();

  // then use setCurrentPage to update the page

}

Home.vue：

import usePagination from './usePagination'
...
setup(){
  const { currentPage} =usePagination();

  // now you could receive the changes made in the other component.
  return {
       currentPage // expose it to the template 
   }
}

【讨论】：

如何使用该方法在Home.vue 上显示始终更新的currentPage？
你的意思是在模板里吗？
是的，正是，因为它是一个参考，我不知道如何处理，我添加.value？只是出于好奇，我可以从任何生命周期挂钩中调用 setCurrentPage() 吗？
从设置钩子中返回它以将其暴露给模板，就像我在编辑的答案中所做的那样，您可以在设置函数的钩子中使用它，例如onMounted

【解决方案2】：

provide/inject 严格用于传递向下层次结构（类似于依赖注入）。它不会改变/装饰给定的目标。这意味着如果您提供一个 string，它将作为 string 被消耗（注入），并且一个字符串本身不是 reactive。

如果你希望它是响应式的，你需要提供一个响应式对象或引用：

<script>
  import {defineComponent, ref, provide} from 'vue';
  import Parent from "./Parent.vue";
  
  export default defineComponent({
    setup (){
      const msg = ref("Hello World");
      provide("message", msg);
      return {msg};
    },
    
    components: {
      Parent
    }
  });
</script>

complete example

【讨论】：