Question

当我在Vuex中更新对象时，如何更新Vue js？

现在我有一个突变

EDIT_USER (state, user) {
    const record = state.users.find(element => element.id === user.id)
    let index = state.users.indexOf(record)
    state.users[index] = user
},

这适用于Object级别，而在控制台中，state.users对象确实已更新。但是视图，并没有自动更新。

如果我首先拼接，然后推送，它按预期工作，并且视图会更新......但它很难看。

  EDIT_USER (state, user) {
     const record = state.users.find(element => element.id === user.id)
     state.users.splice(state.users.indexOf(record),1)s
     state.users.push(user)
  },

它的丑陋因为之后，它显然在一个新的索引，这使它在更新后在表视图中跳转。这不是真正理想的用户体验。

我喜欢更多，＆＃39;就地编辑＆＃39;风格的东西。

如果我只更新对象，如何让Vue重新渲染？本地，异步，或从外部通过websockets

我认为这一切都应该是被动的，而且是自动的，这就是我选择Jquery框架的原因。但它开始看起来像Jquery将是更好的选择，因为我已经解决了这个小时前的问题，并且在这样一个愚蠢的事情上不会被困5个小时。

Answer 1

请参阅Vue文档中的本节： https://vuejs.org/v2/guide/list.html#Caveats

您需要使用以下方法之一让Vue检测数组更改。

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

Answer 2

不要改变状态，返回新状态：

EDIT_USER (state, user) {
    const index = state.users.findIndex(element => element.id === user.id)
    return state.users.map((element, i) => index === i ? user : element)
},

上面将创建一个新的用户对象数组，用户对象取自旧用户对象，但匹配已更改用户ID的用户对象除外：在这种情况下，将使用新的user。

让Vue更新对象更新

2 个答案: