[Vue]有没有一种简单的监听全局变量的写法?
发布于 3 年前 作者 JZLeung 4541 次浏览 来自 问答

不使用 Vuex

要求:

  1. 可以被 computedwatch 监测到修改并触发对应的更新。
  2. 用法简单 如定义:
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 回复

可能你需要的是这个吧

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

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

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

回到顶部