как получить вложенные геттеры в vuex nuxt

у меня 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);
            },
          },
        },
      },
    },
  },
});

Я хочу использовать геттеры в вычисляемом свойстве, которое я тестировал следующим образом

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

жопа получает ошибку

[vuex] неизвестный получатель: nav / message / getCount

что здесь отсутствует

Я также хочу создать отдельную папку для каждого модуля, например, в моем навигаторе есть 3 модуля message, requests & notifications

Я пытался, но нукст взорвал мои коды


vue.js nuxt.js vuex vuex-modules
person sid heart    schedule 11.12.2019    source источник
comment
попробуйте это: count: 'getCount',   -  person arm    schedule 11.12.2019
comment
count: 'nav/message/getCount' в чем разница   -  person sid heart    schedule 11.12.2019
comment
Я думаю, что ваш код неправильный. в вашем хранилище nuxt каждый файл является подмоделью, поэтому вам не нужно создавать вложенные свойства. Создайте новый файл, например. messages.js, и вы можете использовать messages / getterName.   -  person Henrique Van Klaveren    schedule 11.12.2019
comment
@henrique, можете ли вы опубликовать рабочий код, пожалуйста   -  person sid heart    schedule 11.12.2019
comment
исправьте, пожалуйста, ваш заголовок NASTED неверен, измените его на NESTED. Спасибо   -  person Henrique Van Klaveren    schedule 11.12.2019

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, что ваш индекс неправильный, правильнее - разделить модули независимо, примерно так:

в вашем магазине / 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
          }
      } 
    }

вот ваш магазин / 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
          }
      } 
    }

то в вашем компоненте вы можете использовать в качестве вычисляемых свойств:

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

По возможности разделяйте код на более мелкие части, по одной части для каждой вещи. Так вам будет проще обновлять и содержать все в порядке.

Надеюсь это поможет.

person Henrique Van Klaveren    schedule 11.12.2019
comment
@sidheart, пожалуйста, исправьте ваш заголовок NASTED неверен, измените его на NESTED. - person Henrique Van Klaveren; 11.12.2019