如何在多个Vuex模块中使用扩展运算符？遇TypeError报错求助

Hey there, let's break down why you're hitting this error and how to fix it. This specific error pops up because you're trying to spread an undefined or null value in your computed object—and it almost always ties back to issues with how your Vuex modules or mapGetters are configured.

1. Verify your Vuex modules are properly registered and exported #

First up, make sure both the candidates and editPersonDialog modules are correctly added to your Vuex store, and they're exported the right way.

Check your main store setup (e.g., store/index.js) #

Double-check that you've imported and registered the modules correctly:

import Vue from 'vue'
import Vuex from 'vuex'
// Double-check file paths here—typos happen!
import candidates from './modules/candidates'
import editPersonDialog from './modules/editPersonDialog'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    candidates, // Ensure these keys match the module names you use in mapGetters
    editPersonDialog
  }
})

Check individual module files (e.g., store/modules/candidates.js) #

Each module must export a valid object with namespaced: true—this is critical for using namespace-based mapGetters:

export default {
  namespaced: true, // Don't skip this! Without it, mapGetters can't target the module
  state: {
    people: [] // Your actual state data here
  },
  getters: {
    people: state => state.people // Make sure this getter exists and matches the name in mapGetters
  }
}

If you omit namespaced: true, mapGetters("candidates", ["people"]) won't locate the getter, which can lead to unexpected undefined values when spreading.

2. Double-check spelling for module and getter names #

Typos are one of the most common culprits here! Confirm:

• The module names in mapGetters exactly match the keys in your store's modules object (e.g., "candidates" vs "candidate")
• The getter names in the array exactly match what's defined in each module (e.g., "people" vs "person")

3. Confirm mapGetters is correctly imported #

Make sure you've imported mapGetters from Vuex at the top of your component:

import { mapGetters } from 'vuex'

Forgetting this import will make mapGetters undefined, which will throw an error (though usually a different one, but it's worth ruling out).

4. Isolate the issue by testing individual mapGetters calls #

To figure out which module is causing the problem, try removing one mapGetters call at a time:

computed: {
  // First test just this one
  ...mapGetters("candidates", ["people"])
}

If this works, the issue lies with the editPersonDialog module. If it still throws the error, focus on fixing the candidates module.

5. Debug with manual getter access #

If you're still stuck, manually access the getters to verify they exist:

computed: {
  people() {
    console.log(this.$store.getters['candidates/people']) // Check if this returns a valid value
    return this.$store.getters['candidates/people']
  },
  tasks() {
    console.log(this.$store.getters['editPersonDialog/tasks'])
    return this.$store.getters['editPersonDialog/tasks']
  }
}

If either console.log returns undefined, that means the getter or module isn't set up correctly.

内容的提问来源于stack exchange，提问作者Ben C. Isaksen