//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의 코드는 많아져, 관리하기 어려운 부분이 발생한다.
모듈화를 통하여 직관적으로 관리에 용의하게 만드는 작업이 필요하다.
//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;
}
}
...
import mutations from './mutations'
import actions from './actions'
export const store = new Vuex.Store({
...
mutations,
actions
})