vue 3 watch不工作
我试着在我的electron vue 3项目中监视一个ref变量，watch回调在usemenu.ts中没有触发，但它在AppLayout.vue中触发了，我想也许我在electron的环境中调用了useMenu，但我需要electron环境中的BrowserWindow变量来做一些事情。我该怎么办
这就是我创建需要watch的变量config的地方

const config = ref<Config>(defaultConfig)

导出函数useConfig（）{ config.value = readConfig（）

function isConfigExist(): boolean {
    const exist = fs.existsSync(process.env.CONFIG_PATH)
    if (!exist) {
        return false
    } else {
        try {
            const config = JSON.parse(fs.readFileSync(process.env.CONFIG_PATH))
            const defaultConfigKeys = Object.keys(defaultConfig)
            const configKeys = Object.keys(config)
            return defaultConfigKeys.every((key) => configKeys.includes(key))
        } catch (e) {
            return false
        }
    }
}

function createDefaultConfig(): void {
    fs.existsSync(join(process.env.CONFIG_PATH, '..')) || fs.mkdirSync(join(process.env.CONFIG_PATH, '..'))
    fs.writeFileSync(process.env.CONFIG_PATH, JSON.stringify(defaultConfig))
    config.value = readConfig()
}

function readConfig(): Config {
    if (!isConfigExist()) {
        createDefaultConfig()
    }
    return JSON.parse(fs.readFileSync(process.env.CONFIG_PATH))
}

watch(config, () => {
    console.log('useConfig config changed')
    fs.writeFileSync(process.env.CONFIG_PATH, JSON.stringify(config.value))
}, {
    deep: true
})

if (!isConfigExist()) {
    createDefaultConfig()
}

return {config, createDefaultConfig, readConfig}

}
我试着在AppLayout.vue中观看它，它是工作的

import {useConfig} from "../hook/useConfig";
import {watch} from "vue";

const {config} = useConfig()

watch(config, () => {
    console.log('AppLout config changed')
}, {
    deep: true
})

然后，当我在electron上创建窗口时，我调用了useMenu Create菜单

async function createWindow() {
win = new BrowserWindow({
    title: 'Main window',
    icon: join(process.env.PUBLIC, 'favicon.ico'),
    webPreferences: {
        // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
        // Consider using contextBridge.exposeInMainWorld
        // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
        nodeIntegration: true,
        contextIsolation: false,
        preload
    },
    width: 1440,
    height: 840,
    minWidth: 1440,
    minHeight: 840,
    // frame: false,
})

if (process.env.VITE_DEV_SERVER_URL) { // electron-vite-vue#298
    await win.loadURL(url)
} else {
    await win.loadFile(indexHtml)
}

// Make all links open with the browser, not with the application
win.webContents.setWindowOpenHandler(({url}) => {
    if (url.startsWith('https:')) shell.openExternal(url)
    return {action: 'deny'}
})

useMenu(win)

}
我试图在useMenu中获取配置，就像在AppLayout中一样，并观察它，但它不起作用

export function useMenu(win) {
const {config} = useConfig()
const menu = computed(() => {
    return Menu.buildFromTemplate([
        {
            label: '开发快捷键',
            submenu: [
                {
                    label: '切换开发者工具',
                    accelerator: 'F12',
                    click: () => {
                        win.webContents.toggleDevTools()
                    }
                },
                {
                    label: '刷新',
                    accelerator: 'Ctrl+R',
                    click: () => {
                        win.reload()
                    }
                }
            ]
        },
        {
            label: '播放快捷键',
            submenu: [
                {
                    label: '播放/暂停',
                    accelerator: config.value.hotkeyConfig.hotkeys.play.key,
                    click: () => {
                        console.log('播放/暂停')
                    }
                },
                {
                    label: '下一首',
                    accelerator: config.value.hotkeyConfig.hotkeys.next.key,
                    click: () => {
                        console.log('下一首')
                    }
                },
                {
                    label: '上一首',
                    accelerator: config.value.hotkeyConfig.hotkeys.previous.key,
                    click: () => {
                        console.log('上一首')
                    }
                },
                {
                    label: '音量+',
                    accelerator: config.value.hotkeyConfig.hotkeys.volumeUp.key,
                    click: () => {
                        console.log('音量+')
                    }
                },
                {
                    label: '音量-',
                    accelerator: config.value.hotkeyConfig.hotkeys.volumeDown.key,
                    click: () => {
                        console.log('音量-')
                    }
                },
                {
                    label: '显示/隐藏窗口',
                    accelerator: config.value.hotkeyConfig.hotkeys.windowShow.key,
                    click: () => {
                        console.log('显示/隐藏窗口')
                    }
                },
                {
                    label: '退出',
                    accelerator: config.value.hotkeyConfig.hotkeys.quit.key,
                    click: () => {
                        console.log('退出')
                    }
                }
            ]
        }
    ])
})

watch(config, () => {
    console.log('useMenu config changed')
}, {
    deep: true
})

Menu.setApplicationMenu(menu.value)

}