템플릿에서 vue vuex namesthed getter에 액세스합니다.

템플릿에서 vue vuex namesthed getter에 액세스합니다.

vuex nameshorized getter mapping을 작성했습니다..vue컴포넌트는 다음과 같습니다.

...mapGetters([
  'fooModule/barGetter'
])

이 getter에 접속하려면.vue컴포넌트 템플릿?난 시도했다.{{fooModule.barGetter}}효과가 없는 것 같아요{{fooModule/barGetter}}분명히 틀렸습니다.

다른 키를 getter에게 할당할 수 있습니다.mapGetters타고

...mapGetters({
    fooBarGetter: 'fooModule/barGetter'
})

이를 통해 템플릿의 값에 액세스할 수 있습니다.{{forBarGetter}}

다만, 이 웹 사이트에 접속할 수 있는 방법은 없을까 생각하고 있습니다.'fooModule/barGetter'다른 키를 할당하지 않아도 됩니다.가능합니까?만약 그렇다면, 어떻게?

의 첫 번째 파라미터mapGetters이름 공간일 수 있습니다.

computed: {
    ...mapGetters("fooModule", [
        "barGetter"
    ]),
    ...mapGetters("anotherModule", [
        "someGetter"
    ])
}

그러면 다음과 같은 가치를 얻을 수 있습니다.this.barGetter아니면 그냥barGetter템플릿으로 지정합니다.주의하세요, 여러 개를 갖는 것은 완벽하게 받아들일 수 있습니다.mapGetters진술들.

Vuex Getters 매뉴얼

네임스페이스가 있는 Vuex 바인딩 도우미

음, 사실 그것은 키 아래에 등록되어 있다.'fooModule/barGetter'javascript 변수의 유효한 이름이 아닙니다.열쇠는 스트링으로 접근해야 합니다.그렇게 우아하지 않습니다.그래도 할 수 있어요.템플릿에서 액세스 할 수 있습니다.{{ _self['fooModule/barGetter'] }}.

다음의 작업 예를 참조해 주세요.

new Vue({
  el: '#app',
  store: new Vuex.Store({
    modules: {
      fooModule: {
        namespaced: true,
        state: {},
        getters: {
          barGetter() {
            return 'Hi :)';
          }
        }
      }
    }
  }),
  computed: Vuex.mapGetters([
    'fooModule/barGetter'
  ])
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></script>

<div id="app">
  {{ _self['fooModule/barGetter'] }}
</div>

네임스페이스를 첫 번째 매개 변수로 지정하지 않고 이 목표를 달성하려면object/map매핑게터 이름 앞에 이미 이름이 붙은 게터.

...mapGetters({
    'activeItems': ACTIVE_ITEMS_GETTER_WITH_NAMESPACE
})

이것은 돌연변이, 게터 및 동작의 이름 앞에 정렬된 상수가 있는 경우에 매우 유용합니다.이 경우 모듈이 많이 있으며 getter, mutation 또는 action이 내부에 있는 모듈을 조회하는 데 시간이 걸릴 수 있습니다.그래서 상수에 네임스페이스를 추가합니다.

언급URL : https://stackoverflow.com/questions/45131928/access-vue-vuex-namespaced-getter-from-template