vuex의 반응성 게터?

vuex의 반응성 게터?

목록에서 항목을 반환하는 getter가 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 }}

그러면 업데이트되지 않습니다.

문제: 이 getter는 다른 장소에서 사용되므로 이 코드를 복제하지 않습니다.

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

'기본값'인 경우 날짜 변경 또는 기타 속성 변경default오브젝트는 다른 장소에서 갱신해야 합니다.

계산된 속성을 사용하여 getter에 액세스해 보십시오.첫 번째로 Import 합니다.mapGettersVuex로부터의 기능:

import {mapGetters} from 'vuex';

그런 다음 다음과 같이 원하는 getter의 계산된 속성을 추가합니다.

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

스프레드 오퍼레이터(...)를 사용하는 동안mapGetters도우미: 자세한 내용은 여기를 참조하십시오.

그런 다음 템플릿에서{{ getterName }}.

이것은 코드 복제의 문제도 해결합니다.사용자는 이 기능을 사용할 필요가 없기 때문입니다.this.$store.getters온통.

순수하지 않은 게터로는 반응할 수 없어요로컬에 계산된 속성을 생성할 수 있습니다.

출처 : https://github.com/vuejs/vuex/issues/145#issuecomment-230488443

제가 조사를 좀 해봤는데, 안에 게터가 있으면 계산 함수를 사용할 수 있어요.

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

다음은 jsfiddle의 예입니다.

이 오타가 질문에만 있는 건지, 아니면 당신의 프로그램에도 있는 건지...

위에서부터

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: {
       ...

그게 문제가 되는 이유를 설명해 줄 수 있겠네요.

언급URL : https://stackoverflow.com/questions/43939024/reactive-getter-in-vuex