web-dev-qa-db-ja.com

Vuexゲッターが更新されていません

私は以下のゲッターを持っています：

withEarmarks: state => {
    var count = 0;
    for (let l of state.laptops) {
        if (l.earmarks.length > 0) {
            count++;
        }
    }
  return count;
}

コンポーネントでは、このゲッターから派生したこの計算されたプロパティ：

    withEarmarks() { return this.$store.getters.withEarmarks; },

返される値は正しいです。ラップトップの配列内の要素を変更しても、ゲッターは更新されません。

vue.jsvuex
31
daninthemix

あなたの場合、state.laptops.earmarksは配列であり、配列インデックスstate.laptops[index]で操作しています。 Vueは（インデックスによる）状態配列の突然変異に反応することができません。ドキュメントには、このための2つの回避策があります。

// 1. use purpose built vue method:
Vue.set(state.laptops, index, laptop)

// 2. splice the value in at an index:
state.laptops.splice(index, 1, laptop)

文書化されていますが、私はそのページに「これを知らないと何時間もの生産性を無駄にするだろう」と書かれた巨大なネオンサインがいいと思います。

この「警告」の詳細については、こちらをご覧ください。 https://vuejs.org/v2/guide/list.html#Caveats

70
jpschroeder