Vuex バインディングがうまくいかない

Question

Vuexの勉強でストアというものを試してみたのですが、
バインディングができていないようです。
watch等を使わないといけないのでしょうか？

解決したいこと

index.jsのtestListの値が変わった時、
index.vueのリスト(li)に反映したい

index.js

export const state = () => ({
    testList: [],
})

export const mutations = {
    addList(state, list){
        state.testList[state.testList.length] = list;
        console.log(state.testList); #@1
    },
}

export const getters = {
    getList: state => {
        return state.testList
    }
}

index.vue

・・・中略

<button @click="getTestList()">
<li v-for="(val, index) in $store.getters.getList" :key="index">
{{ val.id }}
</li>

・・・中略

methods: {
    getTestList() {
        const response = this.$axios.$get("http://localhost/testapi")
        .then( response => {
            this.$store.commit('addList', response.result)
            console.log(this.$store.getters.testList); #@2
        })
        .catch( error => {
            console.log(error)
        })
    }
},

・・・中略

確認したこと

@1のconsole.logでは確かに値が変更されており、
@2でも追加後の値が確認できています。

よろしくお願いいたします。

Answer 1

@1 のところの配列の挿入に push() を使用してください。

リストレンダリング — Vue.js

Comments

[退会済みユーザー]

ありがとうございます！
変更メソッドというのがあるのですね。
これは連想配列もpushできて便利。。

Answer 2

確信はないのですが Vue.set を使ってみてください。

- state.testList[state.testList.length] = list;
+ Vue.set(state.testList, state.testList.length, list);

• Vuex がリアクティブにならない - teratail

Comments

[退会済みユーザー]

ありがとうございます！
解決しました。