[ Vue Project ] - Vuex [ getters ]

6197 단어 vuexvue.jsvue.js

# 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. 각파일을 export하여 store에 import

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

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

좋은 웹페이지 즐겨찾기