Electron + Vuex 导致视图无法自动刷新的问题

Electron 中,使用 .getGlobal(‘data’) 取出来的对象,Vue 没法直接加上 getter/setter,会导致响应式失效。这个时候可以通过深度 Object.assign({}, source) 来解决。

前几天开发 Meart 的过程中,碰到一个棘手的问题:

  1. 修改数据,视图不变
  2. 切换视图,再回到原来的视图,数据刷新
  3. 通过 Vue devtool 查看 Vuex,有数据提交
  4. 点击最新提交点,或者 “commit all”,之后所有操作正常

因为我对 Electron 和 Vue 都不是很了解,所以这个问题困扰我很长时间。我尝试了各种办法,包括 .splice()let data = this.data; this.data = data;,但是都没有效果。后来实在没办法了跑到 Vue 论坛里发帖求助

没想到很快就得到回复,对方虽然没用过 Electron,但答案看起来方向是对的:remote.getGlobal('var') 得到的对象不是一般意义上的对象,Vue 没有办法给它加上 getter/setter,所以无法实现响应式。

我尝试了一下果然如此,用 require('data.json') 替换从主线程中取值,就一切问题都解决了。或者把 .getGlobal('data') 取出来的值,深度 Object.assign({}, source) 一下也可以。

看来有必要补一下 ES5 里面 Object 新增函数的知识了。