如何在vuex nuxt中获取嵌套的吸气剂 [英] how to get nested getters in 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);
            },
          },
        },
      },
    },
  },
});

我想在我已经测试过的计算属性中使用吸气剂

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

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

对接出错

[vuex]未知吸气剂:导航/消息/getCount

[vuex] unknown getter: nav/message/getCount

这里缺少什么

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

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

我确实尝试过，但是nuxt炸毁了我的代码

i did try but nuxt blow up my codes

推荐答案

我认为您的索引是错误的，正确的做法是单独分离模块，如下所示:

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

在您的store/index.js中

in your store/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 = { }

这是您的store/navi.js

here is your store/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 = { }

然后在您的组件中将其用作计算属性:

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.

希望这会有所帮助.

这篇关于如何在vuex nuxt中获取嵌套的吸气剂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！