Vue.js 手表不走'；无法在全局属性更改时触发/触发

我是Vue的新手，我从VUE3开始。我试图将模板从Vue 2迁移到Vue 3，以便可以开始我的项目

我有这个插件文件

侧栏\Index.ts

import SidebarPlugComp from./SidebarPlugComp.vue'
从“./SidebarLinkPlugComp.vue”导入SidebarLinkPlugComp
//微型内部插件库
常量侧边栏存储={
showSidebar:false，
侧边栏链接：[]，
displaySidebar（值：布尔值）{
this.showSidebar=值
}
}
常量边栏插件={
安装（应用程序：任意）{
app.config.globalProperties.$sidebar=SidebarStore
附件组件（“侧杆-插件-组件”，侧杆插件组件）
应用组件（'sidebar-link-plug-comp'，SidebarLinkPlugComp）
}
}
导出默认边栏插件

此外，我还有一个BaseTopNavLay布局文件，因此我可以使用handleSidebarToggle onclick按钮方法切换侧栏

\\...
\\   ...
从“vue”导入{defineComponent}
从“../components”导入{ModalComp}
导出默认定义组件({
名称：“BaseTopNavLay”，
组成部分：{
莫达尔康
},
// ...
方法：{
handleSidebarToggle（）：void{
this.$sidebar.displaySidebar（！this.$sidebar.showSidebar）
},
handleHideSideBar（）：void{
此.$sidebar.displaySidebar（false）
},
}
})

这是App.vue文件中的手表

从“vue”导入{defineComponent}
导出默认定义组件({
名称：“应用程序”，
方法：{
toggleNavOpen（）{
console.log（'here'）
让root=document.getElementsByTagName（'html'）[0]
root.classList.toggle（'nav-open'）
}
},
/*观察：{
“$sidebar.showSidebar”：函数（newVal，oldVal）{
console.log（newVal、oldVal）
}
}*/
挂载（）{
//@ts忽略
此.$watch（'$sidebar.showSidebar'，此.toggleNavOpen）
}
})

无论我在哪里测试var

this.$sidebar.showSidebar

我都可以正确地访问它的值。此外，onclick方法正在更改Sidebar\Index.ts插件文件中的

SidebarStore

对象

---

谁能给我一个提示，我在这里错过了什么？为什么手表没有被炒鱿鱼。提前感谢。

问题在于您没有将

$sidebar

设置为被动，而

手表需要使用被动变量

你可以把商店放在你拥有它的地方，但我会把它放在一个单独的文件（store.js）中，并在需要的地方导入，而不需要把它放在
app.config.globalProperties.$sidebar
（但这可能是个人的偏好）

//store.js
//使用无功（所有值）
导出常量SidebarStore=Vue.reactive({
showSidebar:false，
侧边栏链接：[]，
})
//或使用ref（每个一个）
//导出常量showSidebar=Vue.ref（false）；
导出常量displaySidebar=（值：布尔）=>{
SidebarStore.showSidebar.value=值；
}

这将使
侧边栏存储
和
显示侧边栏
在代码中的任何位置都可用

像这样使用


\\...
\\   ...
从“vue”导入{defineComponent}
从“../components”导入{ModalComp}
从“../store”导入{SidebarStore，displaySidebar}
导出默认定义组件({
名称：“BaseTopNavLay”，
组成部分：{
莫达尔康
},
// ...
方法：{
handleSidebarToggle（）：void{
displaySidebar（！SidebarStore.showSidebar）
},
handleHideSideBar（）：void{
displaySidebar（假）
},
}
})
谢谢@Daniel，这解决了问题。我正在使用
app.config.globalProperties.$sidebar
，因为我正在研究所有这些，并在vue3文档中找到了它。你是对的，最好在另一个文件中分离商店。再次感谢，很高兴它起了作用。另外，如果你正在构建一个大型应用程序/项目，我建议你考虑r使用
vuex
管理您的全球商店。感谢@Daniel的建议，我将使用vuex，因为应用程序的未来大小会有所改变，并有利于代码的可跟踪性和可维护性。