View does not update after `$store.state.array[i].attr = 'value'`

I write an electron app recently, and now I am facing a very weird problem.

In the mutation, I wrote like this (Source L28-L31)

[types.EDIT_ARTICLE] (state, {id, key, value}) {
    state.articles[id]['lastModifiedTime'] = Date.now();
    state.articles[id][key] = value;
}

In the component (Source L36-L38)

computed: {
  article() {
    return this.$store.state.articles[this.id];
  }
}

after this.$store.commit, the view does not auto update, but I can review the data change from vue-devtool; then if I click the last commit, or commit all, then every change will auto update the view.

I have tried array.splice, array = array, Vue.set, or everything I can find on google, but none of them works. Then I want to open an issue so I created a small fiddle, but it works…

Could anybody give me some advice, or some inspiration? With much appreciated.


About initial data:

When user do any operation, the app will write it down into a static json file. Next time the app starts, electron main process will read it into a global shared object; then the renderer process (web front-end) will use it as initial data.

store/index.js L30


PS: I use Vue 2.1.8 + Vuex 2.1.1

electron main process will read it into a global shared object; then the renderer process (web front-end) will use it as initial data.

I have not ever used Electron but I suspect using the returned object by getGlobal function as initial state. If the initial state object does not allow to configure its property, Vue cannot convert it as reactive value.
If it is the cause of this problem, it may be solved to rewrite this line with const state = Object.assign({}, remote.getGlobal('site'));.

1 Like

Thank you!! I think that is the problem.

First try:

// doesn't work
const state = Object.assign({}, remote.getGlobal('site'));
// works!!
const state = require('site.json');

Second try:

const state = Object.assign({}, remote.getGlobal('site'));
state.articles = state.articles.map( article => {
  return Object.assign({}, article);
});

It works!

Conclusion

By review remote.js, I think electron defines its own get/set to the object, so Vue can’t detect its change.

Thanks again.