[ 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. 모듈화할 파일 생성
//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의 코드는 많아져, 관리하기 어려운 부분이 발생한다.
모듈화를 통하여 직관적으로 관리에 용의하게 만드는 작업이 필요하다.
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
})
Author And Source
이 문제에 관하여([ Vue Project ] - Vuex [ getters ]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@parkyooni/Vue-Project-Vuex-getters저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)