Vue.js Vue可组合作用域问题

我们将Vue 2与Vue Composition API一起使用，并尝试创建一个将公开应用程序首选项的可组合组件：

//useApplicationPreferences.ts
从“@vue/compositionapi”导入{ref，watch}
从'src/graphql/generated/operations'导入{UseSetDarkModeRatation，useViewerQuery}
const darkMode=ref（false）//全局范围
导出常量useApplicationPreferences=（）=>{
const{mutate:darkModeMutation}=useSetDarkModeMutation（（）=>({
变量：{
darkMode:darkMode.value，
},
}))
监视（暗模式，异步（新暗模式）=>{
log（'darkMode:'，newDarkMode）
等待黑暗模式突变（）
})
返回{darkMode}
}

此代码工作正常，但当在同时渲染的两个组件中使用composable时，我们可以看到

watch

已触发两次。通过将

watch

函数移动到全局范围（函数外部），可以轻松解决此问题

然而，问题是我们不能使用

暗模式突变

。如果我们这样做的话，这个graphql变异就不能被移动到函数之外的全局范围，页面甚至不能被呈现

---

目标是使

darkMode

在许多地方可用，并且当

darkMode

ref的值改变时，突变只触发一次。如何实现这一点？

通过创建一个可调用函数解决了这个问题，该函数仅在需要时启动

watch

（即仅在应用程序中的某个地方启动一次）

//useApplicationPreferences.ts
从“@vue/compositionapi”导入{ref，watch}
从'src/graphql/generated/operations'导入{UseSetDarkModeRatation，useViewerQuery}
const darkMode=ref（false）//全局范围
导出常量useApplicationPreferences=（）=>{
const{mutate:darkModeMutation}=useSetDarkModeMutation（（）=>({
变量：{
darkMode:darkMode.value，
},
}))
常数startWatch=（）=>{
监视（暗模式，异步（新暗模式）=>{
等待黑暗模式突变（）
})
}
返回{darkMode，startWatch}
}

可在

MainLayout.vue

中调用一次的：

//MainLayout.vue
从“@vue/composition api”导入{defineComponent}
从“useApplicationPreferences”导入{useApplicationPreferences}
导出默认定义组件({
设置（）{
const{startWatch}=useApplicationPreferences（）
startWatch（）
},
})

然后，所有其他组件只需根据需要使用（获取/设置）

darkMode

ref，而

watch

只运行一次

//Settings.vue
从“@vue/composition api”导入{defineComponent}
从“useApplicationPreferences”导入{useApplicationPreferences}
导出默认定义组件({
设置（）{
const{darkMode}=useApplicationPreferences（）
返回{darkMode}
},
})

导出

darkMode

并在某处调用

useApplicationPreferences

一次怎么样？或者，由于ref应该是一个单例函数，所以最好从根组件传递它，并将其用作此可组合函数的参数。使用可组合函数的整个想法是能够在许多地方重用它。另一方面，有许多

ref

对象，而不仅仅是示例中的一个。是的，我明白你的意思了。但是，对于分散在不同地方的单例（相对于集中的源），随着您的扩展，维护将变得更加困难。此外，我在这个函数中没有看到任何应该是可组合的——复制的手表告诉你这不是正确的模式。我理解。但是我们需要在

MainLayout.vue

和

Settings.vue

中加载应用程序首选项。我们甚至可能有一个

Statusbar.vue

，其中我们需要相同的

ref

，比如

DarkMode

，

语言

。。。一个集中式的组合似乎是一个好主意。不过我还是更喜欢这个特殊的用例。Vuetify内部似乎也使用了几乎相同的方法。