Vuex 모듈 게터 및 돌연변이에 액세스하는 방법

Vuex 모듈 게터 및 돌연변이에 액세스하는 방법

자작 스토어 오브젝트 대신 Vuex를 사용하려고 하는데 Vue.js의 다른 곳처럼 명확한 문서를 찾을 수 없습니다.'제품'이라고 불리는 Vuex 모듈이 있으며 자체 상태, 돌연변이, 게터 등이 있다고 가정해 보겠습니다.해당 모듈에서 '작동 데이터 클리어'라는 작업을 참조하려면 어떻게 해야 합니까?문서에서는 모듈 상태에 액세스하는 예를 보여 줍니다.

store.state.a // -> moduleA's state

하지만 괴터, 돌연변이, 행동 등에 대해 볼 수 있는 건 아무것도 없어요

수락된 답변과 더불어 답변에 누락된 getter에 대한 워크라운드를 제공하고자 합니다.

스토어 디버깅
어떤 경우에도 전화하실 수 있습니다.console.log(this.$store)를 디버깅합니다.
이렇게 하면 getter의 이름 앞에 이름 공간이 붙는 것을 볼 수 있습니다.

액세스 이름 지정 getter
this.$store.getters['yourModuleName/someGetterMethod']

디스패치 이름순서
this.$store.dispatch('yourModuleName/doSomething')

디스패치명에는 파라미터가 붙어 있습니다.
this.$store.getters['yourModuleName/someGetterMethod'](myParam)

결론
핵심은 저스틴이 설명한 파일 시스템처럼 네임스페이스를 처리하는 것입니다.

편집: vuex Store 처리에 적합한 라이브러리를 찾았습니다.
기본적인 지식뿐만 아니라 이 vuex 라이브러리를 vuex 스토어에서 효과적이고 빠르게 작업할 수 있도록 추가하고자 합니다.https://github.com/davestewart/vuex-pathify 를 참조해 주세요.
매우 흥미로워 보이고 구성에 관심이 많으며 vuex에서 직접 2waybinding을 처리할 수도 있습니다.

** 편집:다른 답변들 덕분입니다.전체 패밀리를 포함한 디스패치 방법 추가.

이 예에서는 다음과 같습니다.store.dispatch('products/clearWorkingData')작업/파일을 파일 시스템이라고 생각할 수 있습니다.모듈이 깊이 중첩될수록 모듈이 트리에 깊이 중첩됩니다.

네가 갈 수 있도록store.commit('first/second/third/method')3층 깊이의 나무가 있다면요.

허용된 응답에 대한 다른 추가 사항으로, getter에 매개 변수를 전달해야 하는 경우(예를 들어 스토어 컬렉션에서 특정 항목을 가져오는 경우) 다음과 같이 전달해야 합니다.

this.$store.getters['yourModuleName/someGetterMethod'](myParam)

나는 이 표기법을 별로 좋아하지 않지만, 적어도 지금은 그렇다.

이 방법을 시도해 보세요!

getCounter(){
  return this.$store.getters['auth/getToken'];     
}

auth모듈명이고getToken내가 얻는 거야

Vuex mapGetters 및 mapActions를 사용하면 이 작업을 매우 쉽게 수행할 수 있습니다.하지만 동의해요, 아직 문서상으로는 잘 드러나지 않았어요.

스토어 모듈 'products'에 'mostPopular'라는 getter와 'clearWorkingData'라는 액션이 있다고 가정합니다.

<template>
 <div>
  <p>{{mostPopularProduct}}<p>
  <p><button @click="clearProductData">Clear data</button></p>
 </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
 computed: mapGetters({
  mostPopularProduct: "products/mostPopular"
 }),
 methods: mapActions({
  clearProductData: "products/clearWorkingData"
 })
}
</script>

mapGetters 도우미는 스토어 getters를 로컬 계산 속성에 매핑하기만 하면 됩니다.

    import { mapGetters } from 'vuex'

    export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
If you want to map a getter to a different name, use an object:

    ...mapGetters({
  // map `this.doneCount` to `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

.namespaced: true 스토어 를 설정하는

언급URL : https://stackoverflow.com/questions/41833424/how-to-access-vuex-module-getters-and-mutations