挖坑指南：module namespace not found in mapGetters()

 

 

 

首先看下我的store.js

import Vue from 'vue'
import Vuex from 'vuex'
import users from './users/index'
Vue.use(Vuex)
// 创建VueX对象
const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    users
  }
})

export default store

users下面的index.js

 

const state = {
  name: '蜡笔小仙女',
  doneTodosCount: 1110,
  anotherName: 'my baby'
}
const mutations = {
  setName (state, name) {
    state.name = name
  }
}
const actions = {
  setMyName ({commit, state}, name) {
    commit('setName', name)
  }
}
const getters = {
  getName (state) {
    return state.name
  },
  getDoneTodosCount (state) {
    return state.doneTodosCount
  },
  getAnotherName (state) {
    return state.anotherName
  }
}

export default {
  namespaced: true, // 增加命名空间
  state,
  mutations,
  actions,
  getters
}

 

 

 

在组件中使用：

<template>
  <div class="hello">
    {{getName}}---{{getDoneTodosCount}}---{{getAnotherName}}
    <button type="button" @click="setMyName('小猪佩奇')">点击更改</button>
    <router-link :to="{name: 'MyStore'}">点击跳转另一个页面</router-link>
  </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'HelloWorld',

  data () {
    return {}
  },
  methods: {
    ...mapActions({
      'setMyName': 'users/setMyName'
    })
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters({
      'getName': 'users/getName',
      'getDoneTodosCount': 'users/getDoneTodosCount',
      'getAnotherName': 'users/getAnotherName'
    })
  }
}
</script>

 npm run dev效果如下