nuxtにてvuexのstoreがどこまでリアクティブであるかを以下のコードで実験しており、
test_array_object
がadd_test
によって変更がなされた時、リアクティブに変更が反映されている事が確認できました。
store/index.js
export const state = () => ({
test_array_object: [{a: 1, b: 2}]
})
export const mutations = {
add_test(state, {idx, data}) {
state.test_array_object[idx].a = data
}
}
しかしstore/index.js
はmutations内で、
state.test[idx].a = data
という用にstateの配列test_array_object
に対してインデックス番号を指定してstateの更新を行っています。
しかしVue公式サイトによれば、Vueは配列のインデックスと一緒にアイテムをセットする場合は変更を追跡できないようです。
Vue は、配列における次の変更は検知できません:
インデックスと一緒にアイテムを直接セットする場合、例えば vm.items[indexOfItem] = newValue 配列の長さを変更する場合、例えば vm.items.length = newLength
この実験結果は、なぜインデックスを直接指定しているにもかかわらずリアクティブ性が維持されているのですか?