如何调试导入的Vue全局ref响应式变量？

方法1：挂载到Vue全局属性 #

在项目入口文件（比如main.js）里，把全局state挂载到Vue实例的全局属性上：

import { createApp } from 'vue'
import App from './App.vue'
import state from './state'

const app = createApp(App)
// 挂载全局状态到Vue全局属性
app.config.globalProperties.$globalState = state
app.mount('#app')

打开Vue DevTools后，在任意组件的$root节点下就能找到$globalState，它会实时同步状态变化，直接查看即可。

方法2：挂载到window对象（快速临时调试） #

如果不想修改入口文件，仅做临时调试，可以在任意组件的生命周期钩子（比如onMounted）里把state挂到全局window对象上：

import { onMounted } from 'vue'
import state from './state'

onMounted(() => {
  window.$globalState = state
})

之后直接在浏览器控制台输入$globalState，就能查看这个响应式变量的实时值，甚至可以直接在控制台修改测试。

方法3：控制台动态导入模块查看 #

如果你的state是ES模块导出，在现代浏览器控制台里可以通过动态导入直接获取：

import('/src/state.js').then(module => console.log(module.default))

注意这个方法每次页面刷新后都需要重新执行，适合临时快速查看。

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