vuex nuxt에서 중첩된 getter를 가져오는 방법

vuex nuxt에서 중첩된 getter를 가져오는 방법

있습니다store/index.js이것처럼.

new Vuex.Store({
  modules: {
    nav: {
      namespaced: true,
      modules: {
        message: {
          namespaced: true,
          state: {
            count: 0,
            conversations: [],
          },
          getters: {
            getCount: state => {
              return state.count;
            },
          },
          mutations: {
            updateCount(state) {
              state.count++;
            },
          },
          actions: {},
        },
        requests: {
          namespaced: true,
          state: {
            friends: [],
          },
          getters: {
            getFriends: state => {
              return state.friends;
            },
          },
          mutations: {
            pushFriends(state, data) {
              state.friends.push(data);
            },
          },
          actions: {
            pushFriends(commit, data) {
              commit('pushFriends', data);
            },
          },
        },
      },
    },
  },
});

이렇게 테스트한 계산 속성에 getters를 사용하고 싶다.

computed: {
    ...mapGetters({
      count: 'nav/message/getCount',
    }),
  },

버트 오류 발생

[vuex] 알 수 없는 getter: nav/message/getCount

여기에 없는 것

또한 내 내비게이션에 3개의 모듈이 있는 것처럼 모든 모듈에 대해 별도의 폴더를 만들고 싶다.message, requests & notifications

노력했지만 내 코드를 날려버렸어

인덱스가 잘못된 것 같습니다.정확한 것은 모듈을 개별적으로 분리하는 것입니다.이러한 방법은 다음과 같습니다.

를 참조해 주세요.

    export const state = () => ({
      config: {
        apiURL: 'https://meuapp.com'
      }
    })
    
    export const mutations = { }        
    export const actions = { }

    // getters
    export const getters = { 
      test: state => payload => {
        if (!payload)
          return {
            message: 'this is an messagem from index without payload test.', // you don't need pass any payload is only to show you how to do.
            result: state.config
          }
        else 
          // return value
          return {
            message: 'this is an message from index test with payload.',
            result: state.config, // here is your index state config value
            payload: payload // here is yours params that you need to manipulate inside getter
          }
      } 
    }

여기 당신의 가게/내비입니다.

    export const state = () => ({
      navi: {
        options: ['aaa', 'bbb', 'ccc']
      }
    })

    export const mutations = { }
    export const actions = { }
    
    // getters
    export const getters = { 
      test: state => payload => {
        if (!payload)
          return {
            message: 'this is a messagem from nav store without payload test.', // you don't need pass any payload is only to show you how to do.
            result: state.navi
          }
        else 
          // return value
          return {
            message: 'this is an messagem from navi test with payload.',
            result: state.navi, // here is your index state config value
            payload: payload // here is yours params that you need to manipulate inside getter
          }
      } 
    }
    

그런 다음 구성 요소에서 계산 속성으로 사용할 수 있습니다.

    <template>
      <div>
        without a paylod from index<br>
        <pre v-text="indexTest()" />
    
        with a paylod from index<br>
        <pre v-text="indexTest( {name: 'name', other: 'other'})" />
    
        without a paylod from navi<br>
        <pre v-text="naviTest()" />
    
        with a paylod from navi<br>
        <pre v-text="naviTest( {name: 'name', other: 'other'})" />
    
        access getters from methods<br>
        <pre>{{ accessGetters('index') }}</pre>
        <pre v-text="accessGetters('navi')" />
        <br><br>
    
      </div>
    </template>
    
    <script>
    import {mapGetters} from 'vuex'
    export default {
      computed: {
        ...mapGetters({
          indexTest: 'test',
          naviTest: 'navi/test'
        })
      },
      methods: {
        accessGetters (test) {
          if (test && test === 'index' ) {
            console.log('test is', test) // eslint-disable-line no-console
            return this.indexTest()
          }
          else if (test && test === 'navi') {
            console.log('test is:', test) // eslint-disable-line no-console
            return this.naviTest()
          }
          else {
            return 'test is false'
          }
        }
      }
    }
    </script>

가능한 한 코드를 1개씩 작은 부분으로 나눕니다.이를 통해 모든 것을 쉽게 업데이트하고 정리할 수 있습니다.

이게 도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/59287712/how-to-get-nested-getters-in-vuex-nuxt