[ Vue Project ] - Vuex [ getters ]


#mapStateよりも役に立つgetters

//store
getters:{
  fetchedAsk(state){
    return state.ask;
  },
    fetchedJob(state){
      return state.jobs;
    }
},
//AskView.vue
<template>
  <div>
  <div v-for="item in fetchedAsk" :key="item.id">{{ item.title }}</div>
</div>
</template>
import { mapGetters } from 'vuex';
export default {
  name: "AskView",
  computed: {
    ...mapGetters([
      'fetchedAsk'
    ])
    ...

# store module


データが多ければ多いほどstoreのコードが多くなり、管理しにくい部分が生まれます.
モジュール化により、管理をより直感的に行う必要があります.

1.モジュール化するファイルの作成



2.storeの内容を各ファイルに移動

//mutations.js
export default {
    SET_NEWS(state, news){
        state.news = news;
    },
    SET_ASK(state, ask){
        state.ask = ask;
    },
    SET_JOBS(state, jobs){
        state.jobs = jobs;
    }
}

3.各ファイルをエクスポートしてstoreにインポートする

...
import mutations from './mutations'
import actions from './actions'

export const store = new Vuex.Store({
...
  mutations,
  actions
})