Nuxt CNode：Node.js专业中文社区

[Vue]有没有一种简单的监听全局变量的写法？

发布于 4 年前作者 JZLeung 6317 次预览最后一次回复是 4 年前来自问答

不使用 Vuex。

要求：

可以被 computed 或 watch 监测到修改并触发对应的更新。
用法简单如定义：

export default { username: '张三', age: 18 }

使用（示例，不一定要这么用）：

export default {
  computed: {
    username() {
	  return user.username
	}
  },
  watch: {
    username(newVal, oldVal) {
	  console.log(`${oldVal}改名了，改成${newVal}`)
	}
  }
}

主要是啥都写 store 太臃肿了，而且修改起来麻烦（还需要写一个 mutation 或者 action），而且现在项目中又有很多数据都是跨组件间调用的。

所以想问下有没有一个较为优雅的全局变量管理方式（因为代码跑在 electron 下，因此无需考虑兼容性问题，如 Proxy、各种 Observer）

4 回复

chenkai0520

1楼•4 年前

官网有https://cn.vuejs.org/v2/guide/components-edge-cases.html

MeetTheBest

2楼•4 年前

可能你需要的是这个吧

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

https://cn.vuejs.org/v2/api/#Vue-observable

2234839

3楼•4 年前

v3 的组合式api 可以轻易做到。另外我写过一个 electron icp 封装（基于vue computed）可以让渲染进程与主线程共享同一个模块使用该方法导出的变量，都可以写值过去和自动监听更新

JZLeung

4楼•4 年前

@MeetTheBest 哇，这个看起来不错啊。感谢大佬。