vuex에서 모듈을 사용 스토어에서 데이터 불러오는 방법

몇일동안 헤맸다

#foodList.vue

foodList.vue

<template>
  <div>
    <h1>매일먹는거</h1>
    <ul>
      <li
        v-for="(food,index) in foodList"
        :key="index"
      >
        {{ food.image }}
      </li>
    </ul>
  </div> 
</template>

<script>
import {mapState} from 'vuex';
export default {
  data(){
    return {
    }
  },
    computed:{
        ...mapState('foodListModule',["foodList"])
    },
    created(){
      this.$store.dispatch("foodListModule/setFoodList");
    },
}
</script>

import { createStore} from 'vuex'
import { foodListModule } from "./foodlist/index"

export default createStore({
  modules: {
    foodListModule,
  }
})

store

import foodListApi from "../../api/foodList";

export const foodListModule = {
  namespaced:true,
  state: {
    foodList :[]
  },
  mutations: {
    setFoodList(state, foodList) {
      state.foodList = [].concat(foodList);
    },    
   },
  actions: {
    async setFoodList({commit}) {
      const response = await foodListApi.getFoodList()
      commit('setFoodList', response.data.food)
    }
   },
  getters: { }
}