Vuex - 模块中的访问状态

Question

所以我迷路了... 我有一个 Vuex。我在文件common.js 中有一个模块common：

const initState = {
  fruits: []
}
export default {
  state: initState,
  mutations: {
    SET_FRUITS(state, fruits) {
      console.log(fruits);
      state.fruits = fruits;
    }
  },
  actions: {
    async getFruits({ commit }) {
      const fruits =[
        {
          text: 'Apple',
          value: {id: 1, val: 'apple'},
        },
        {
          text: 'Banana',
          value: {id: 2, val: 'banana'},
        },
        {
          text: 'Pear',
          value: {id: 3, val: 'pear'},
        },
        {
          text: 'Plum',
          value: {id: 4, val: 'plum'},
        }
      ];

      commit('SET_FRUITS', fruits);
    }
  }
}

我的store 在index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import common from './modules/common';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    common,
  }
})

我尝试在 App.vue 中访问 state.fruits：

<template>
  <div>
    {{ this.$store.state.fruits }}
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  async mounted() {
    await this.$store.dispatch('getFruits');
    console.log(this.$store.state.fruits);
  },
}
</script>

console.log from mutation 返回水果数组。有用。这个很酷。 App.vue 中来自mounted() 的console.log 返回未定义。这不酷。

为什么？我错过了什么？

Answer 1

这是一个工作示例。还要仔细检查你的 vuex 存储配置/注册，不要忘记使用dispatch

const store = new Vuex.Store({
  state: {
    fruits: []
  },
  actions: {
    getFruits({
      commit
    }) {
      const fruits = [{
          text: 'Apple',
          value: {
            id: 1,
            val: 'apple'
          },
        },
        {
          text: 'Banana',
          value: {
            id: 2,
            val: 'banana'
          },
        },
        {
          text: 'Pear',
          value: {
            id: 3,
            val: 'pear'
          },
        },
        {
          text: 'Plum',
          value: {
            id: 4,
            val: 'plum'
          },
        }
      ];

      console.log(fruits)

      commit('SET_FRUITS', fruits);
    }
  },
  mutations: {
    SET_FRUITS(state, fruits) {
      state.fruits = fruits;
    }
  },
});

new Vue({
  el: "#app",
  store,
  computed: {
    fruits() {
      return this.$store.state.fruits;
    },
  },
  mounted() {
    this.$store.dispatch('getFruits')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div v-for='(fruit, i) in fruits' :key="i">
    {{fruit}}
  </div>
</div>