Vue组件调用Vuex模块导航数据报错：navigationLinks未定义

问题原因 #

你的navigation是Vuex的命名模块，默认情况下模块内的getters处于命名空间隔离状态，直接使用mapGetters(['navigationLinks'])无法定位到该getter，导致组件渲染时提示navigationLinks未定义。

解决方法 #

方法1：指定模块名映射getter #

修改组件的computed部分，在mapGetters中明确指定模块名称：

computed: {
  ...mapGetters('navigation', ['navigationLinks'])
}

方法2：显式开启模块命名空间（推荐） #

在navigation.js模块中添加namespaced: true，明确启用命名空间隔离，避免和其他模块的getter冲突：

const state = {
  links: [
    { label: 'Home', route: '/', icon: 'home' },
    { label: 'About', route: '/about', icon: 'info' },
    { label: 'Contact', route: '/contact', icon: 'envelope' },
  ]
}

const getters = {
  navigationLinks: state => state.links
}

export default {
  namespaced: true, // 启用命名空间
  state,
  getters
}

之后组件中仍使用方法1的mapGetters写法即可。

额外优化 #

组件中无需导入store和navigation模块（只要项目已在main.js中全局挂载Vuex Store），可以删除以下两行冗余代码：

import store from '@/store';
import navigation from '@/store/navigation';

修正后的完整导航组件代码：

<template>
  <nav>
    <ul>
      <li v-for="link in navigationLinks" :key="link.label">
        <router-link :to="link.route">{{ link.label }}</router-link>
      </li>
    </ul>
  </nav>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Navbar',
  computed: {
    ...mapGetters('navigation', ['navigationLinks'])
  }
}
</script>

内容的提问来源于stack exchange，提问作者ken mutesh