zoukankan      html  css  js  c++  java
  • 挖坑指南: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效果如下

     

  • 相关阅读:
    3288 积木大赛
    3284 疯狂的黄大神
    1531 山峰
    1018 单词接龙
    1432 总数统计
    1507 酒厂选址
    1063 合并果子
    几个sort不能过的题目
    poj 2245 Lotto
    求两圆相交面积模板
  • 原文地址:https://www.cnblogs.com/yeminglong/p/12611153.html
Copyright © 2011-2022 走看看