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

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

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

对接出错

[vuex]未知吸气剂：nav / message / getCount

这里缺少什么

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

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

Answer 1

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

在商店/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

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

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

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

只要有可能，就将代码分成较小的部分，每一部分都分成一个部分。这样可以使您更轻松地进行更新并保持一切井井有条。

希望这会有所帮助。

如何在vuex nuxt中获取嵌套的吸气剂

1 个答案: