挖坑指南：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效果如下