Vuexでstateにあらかじめ設定していないプロパティを新たに挿入するときの注意事項

環境：

vue@2.6.12

vuex@3.6.2

state = {

　　test: {}

}

mutations = {

　　'addNewProp'(state, payload) {

　　　　state.test[payload.key] = payload.content

　　　　　　　　　　OR

　　　　Object.assign(state.test, {[payload.key]: payload.content})

　　}

}

上記でstateに新しいプロパティを付与できるが

getterでObject.values(state.test)を実行すると初期値しか参照しないためempty arrayが返ってくる。

参照

forum.vuejs.org

solution)

Vue.setを使う

mutations = {

　　'addNewProp'(state, payload) {

　　　　Vue.set(state.test, payload.key, payload.content)

　　}

}

ref:

jp.vuejs.org