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

     

  • 相关阅读:
    [Android教程]通过Intent分享数据内容给其他应用程序
    【Android您问我讲】Android 2.x中使用actionbar Actionbarsherlock的使用
    PHP按比例生成縮略圖片
    PHP實現任務計畫
    javascript下漢字和Unicode編碼互轉代碼
    js存/讀取cookie函數
    php Captcha 練習
    PHP概率抽獎
    讓iframe自適應高度
    簡單的 PHP 將sql文件導入數據庫程序
  • 原文地址:https://www.cnblogs.com/yeminglong/p/12611153.html
Copyright © 2020-2023  润新知