web-dev-qa-db-ja.com

vuexの反応性ゲッター？

リストからアイテムを返すvuexのゲッターがあります

const store = new Vuex.Store({
    state: { arr: {
        1: {name: 'one', attr: true},
        2: {name: 'two', attr: false} 
    },
    mutations: {
        setArrItemName(state, id, name) {
            Vue.set(state.arr, id, name);
        }
    },
    getters: {
        arrItemById(state, getters) => (id) => {
            const item = state.arr[id];
            if(item) return item;
            return {
                 name: 'default', attr: true
            };
        }
    }
})

テンプレートに出力すれば

{{ $store.state.arr[1]['name'] }}

別の部分が呼び出すと正常に更新されます

this.$store.commit('setArrItemName', 1, 'new name');

ただし、テンプレートに

{{ $store.getters.arrItemById(1).name }}

その後、それは更新されません

問題：このゲッターはさまざまな場所で使用されており、このコードを複製したくない

<template v-if='$store.state.arr[id]'>
    {{ $store.state.arr[id].name }}
</template>
    Default
<template v-else>
</template>

'default'がいつか変更された場合、またはdefaultオブジェクトの他の属性が変更された場合は、別の場所で更新する必要があります。

vue.jsvuex
4
Jackson J

ゲッターにフォリウとしてアクセスするには、計算されたプロパティを使用してみてください。

import {mapGetters} from 'vuex'
computed:{
    ...mapGetters({
        getterName: 'your-getter-name-in-store'
    })
}

Mapgettersヘルパーを使用している間はspreadoperator（...）を使用します。使用する理由の詳細を読むことができます ここ テンプル騎士団で{{ getterName }}を使用してください

これにより、必要な場所でthis.$store.gettersを使用する場合に、コードの重複の問題も解決されます。

3
Vamsi Krishna

純粋ではないゲッターに反応することはできません。ローカルで計算プロパティを作成できます。

出典： https://github.com/vuejs/vuex/issues/145#issuecomment-23048844

私はいくつかの調査を行いました、そしてあなたは内部のゲッターで計算された関数を使うことができます：

  computed: {
    arr() {
            return this.$store.getters.arrItemById(this.id);
      }
  },

これが jsfiddle の例です。

1
Tobino

このタイプミスが問題になっているのか、それともあなたのプログラムにもあるのかわかりません...

上から

const store = new Vuex.Store({
    state: { arr: {
        1: {name: 'one', attr: true},
        2: {name: 'two', attr: false} 
    },
    mutations: {
       ...

は

const store = new Vuex.Store({
    state: { arr: {
        1: {name: 'one', attr: true},
        2: {name: 'two', attr: false} 
      } // missing this closing brace on object arr
    },
    mutations: {
       ...

それはゲティア問題を説明するかもしれません。

0
Richard Matsen