如何在 vuex nuxt 中获取嵌套的 getter

Question

我有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] unknown getter: nav/message/getCount

这里缺少什么

我还想为每个模块创建单独的文件夹，比如我的导航有 3 个模块 message, requests & notifications

我试过了，但我的代码没有爆炸

Answer 1

我认为你的索引是错误的，正确的做法是独立分离模块，像这样：

在你的 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
          }
      } 
    }

这是你的 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
          }
      } 
    }

然后在您的组件中，您可以将其用作计算属性：

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

尽可能将您的代码分成更小的部分，每个部分一个。这使您更容易更新并保持一切井井有条。

希望这对您有所帮助。

Answer 2

我来这里是为了找到一种方法来访问嵌套在 Vue.js 中另一个模块中的模块的 getter，以下解决方案对我有用：

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

也许这可以帮助遇到类似问题的人。

如何在 vuex nuxt 中获取嵌套的 getter

how to get nested getters in vuex nuxt

vue.js

vuex

nuxt.js

vuex-modules