オブジェクト更新時に更新するVueを取得する

Question

Vuexでオブジェクトを更新すると、Vue jを更新するにはどうすればよいですか？

は、今私は、突然変異

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

これは、オブジェクトレベルで動作し、コンソールに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) 
    }, 

その後は、明らかに新しいインデックスになっているため、更新後のテーブルビューでジャンプします。実際にはここでの希望のユーザーエクスペリエンス

もっと「似ている」スタイルのものが好きです。

オブジェクトを更新するだけで、Vueを再レンダリングする方法を教えてください。

私はそれがすべて反応的で自動であると思っていたので、私は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

は、1つの新しいを返し、状態を変化させません。：

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が使用されます。