Vuex - 모듈의 액세스 상태

Vuex - 모듈의 액세스 상태

그래서 난 길을 잃었어...난 Vuex가 있어.그리고 나는 모듈을 가지고 있다.common줄지어common.js:

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:

<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돌연변이를 통해 과일 배열을 반환합니다.그건 효과가 있다.멋있네요. console.log부터mounted()App.vue에서 정의되지 않은 값이 반환됩니다.그건 멋지지 않다.

왜? 내가 뭘 놓쳤지?

다음은 작업 예시입니다.또한 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>

언급URL : https://stackoverflow.com/questions/63441564/vuex-access-state-in-modules