vue.js - vuex 多module下，子组件获取子模块state失败

问题描述

问 题

我的项目目录如下：

apple.js

const state = {
  appleNumer: 0
}
const getters = {
  getAppleNumer: state => state.appleNumer
}
const actions = {
  fetchAppleNumberByIncrement ({commit, state}) {
    //  调用后台接口
    commit('incrementApple')
    console.log('+' + state.appleNumer)
  },
  fetchAppleNumberByDecrement ({commit, state}) {
    //  调用后台接口
    commit('decrementApple')
    console.log('-' + state.appleNumer)
  }
}
const mutations = {
  // 只允许mutations对state进行更改
  incrementApple: state => state.appleNumer++,
  decrementApple: state => state.appleNumer--
}

export default {
  state,
  getters,
  actions,
  mutations
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import apple from './modules/apple'

Vue.use(Vuex)

export default new Vuex.Store({
modules: {

// 包含mutation action state一套模型
a: apple

}
})

**Apple.vue**

 <template>
  <div class="">
    <h1>{{ msg }}</h1>
    <h2>appleNumer:{{appleNumer}}</h2>
    <button @click='addOne'>add one</button>
    <button @click='minusOne'>minus one</button>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        msg: 'i am apple component'
      }
    },
    methods: {
      addOne () {
        this.$store.dispatch('fetchAppleNumberByIncrement')
      },
      minusOne () {
        this.$store.dispatch('fetchAppleNumberByDecrement')
      }
    },
    computed: {
      appleNumber () {
        console.log('-----------')
        return this.$store.getters.getAppleNumer
      }
    }
  }    
</script>        
    <style lang="stylus" rel="stylesheet/stylus" scoped>        
</style>

在Apple.vue中我通过计算属性appleNumber获取apple.js中的appleNumer，没有获取到，不知道是哪里的问题？

解决方案

this.$store.state.getAppleNumer 能取到吗？

这篇关于vue.js - vuex 多module下，子组件获取子模块state失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！