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

     

  • 相关阅读:
    C#泛型使用小记
    Unity3d + NGUI 的多分辨率适配
    CodeSmith(1 生成实体)
    从数据库读取数据Table后转成对应的实体泛型方法
    安卓data./data没数据的时候
    Java工具
    SqlBulkCopy 用法
    Wind7 64位配置安卓环境
    .net和c#下的自定义配置
    Log4Net可以根据不同的类容输出到不同的文件夹下面
  • 原文地址:https://www.cnblogs.com/yeminglong/p/12611153.html
Copyright © 2011-2022 走看看