как получить вложенные геттеры в vuex nuxt - PullRequest
Новая
       71

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

1 голос
/ 11 декабря 2019

у меня 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

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

1 Ответ

1 голос
/ 11 декабря 2019

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

в вашем магазине / index.js 

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

// 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 mutations = { }

export const actions = { }

вот ваш магазин/navi.js

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

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

export const mutations = { }

export const actions = { }

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

<code><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') }}


import {mapGetters} из 'vuex'экспорт по умолчанию {вычислено: {... mapGetters ({indexTest: «тест»,naviTest: «navi / test»})},методы: {accessGetters (тест) {if (test && test === 'index') {console.log ('test is', test) // eslint-disable-line no-consoleвернуть this.indexTest ()}еще если (test && test === 'navi') {console.log ('test is:', test) // eslint-disable-line no-consoleвернуть this.naviTest ()}еще {возврат 'тест ложен'}}}}

Когда бы ни было возможно, разделите ваш код на более мелкие части, по одной части для каждой вещи. Это облегчает вам обновление и поддерживает все в порядке.

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

...