how to get nested getters in vuex nuxt

Question

i have store/index.js like this

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);
            },
          },
        },
      },
    },
  },
});

i want to use getters in computed property i have tested like this

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

butt getting error

[vuex] unknown getter: nav/message/getCount

what is am missing here

i also want to make separate folder for every modules like my nav have 3 modules message, requests & notifications

i did try but nuxt blow up my codes

I think your code is wrong. in nuxt your store each file is a submodel, so you don't need create a nested properties. Create a new file eg. messages.js and you are able to use messages/getterName. — Henrique Van Klaveren
– Henrique Van Klaveren, Commented Dec 11, 2019 at 14:24
please fix your title NASTED is wrong, change to NESTED. Thank you — Henrique Van Klaveren
– Henrique Van Klaveren, Commented Dec 11, 2019 at 16:10

Henrique Van Klaveren · Accepted Answer · 2021-07-07 17:18:49Z

I think your index is wrong, the correct thing is to separate the modules independently, something like this:

in your store/index.js

    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
          }
      } 
    }

here is your store/navi.js

    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
          }
      } 
    }

then in your component you can use as a computed properties:

    <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>

Whenever possible separate your code into smaller parts, one part for each thing. This makes it easier for you to update and keep everything in order.

Hope this helps.

@sidheart please fix your title NASTED is wrong, change to NESTED.

Timm · Accepted Answer · 2022-06-02 11:04:49Z

0

I came here to find a way to access the getters of a module that was nested inside another module in Vue.js and the following solution worked for me:

this.$store.getters['outerModuleName/innerModuleName/nameOfTheGetter']

Maybe this helps someone with a similar problem.

edited Jun 2, 2022 at 11:04

answered Jun 2, 2022 at 10:32

Timm

414 bronze badges

Collectives™ on Stack Overflow

how to get nested getters in vuex nuxt

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related