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效果如下

     

  • 相关阅读:
    算是鼓励自己吧
    那些年,我们一起追过的梦想
    敢问路在何方?
    关于红黑树旋转算法的一点说明
    存一下
    shell脚本变量
    ubuntukylin
    如何在批处理作业进行DEBUG
    IBM AS/400 应用系统开发的软件工程工具分析
    AS/400开发经验点滴(六)如何制作下拉菜单
  • 原文地址:https://www.cnblogs.com/yeminglong/p/12611153.html
Copyright © 2011-2022 走看看