728x90
반응형
Vuex
[Vue.js] Vuex 포스팅 참고
설치
npm i vuex
실행
// Terminal jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/vue-advanced/vue-news (master) $ npm i vuex
구현
1. src/store/index.js
생성
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({});
2. main.js
에 index.js
에서 선언한 store
import
import Vue from 'vue' import App from './App.vue' import { router } from './routers/index.js' // store의 index.js import import { store } from './store/index.js' Vue.config.productionTip = false new Vue({ render: h => h(App), router, // Vue 객체에 store 속성 추가 // store: store store }).$mount('#app')
state, actions, mutations 적용
NewsView에 기본 방식으로 적용하기
1. src/store/index.js
에 NewsView에 필요한 state
, actions
, mutations
추가
import Vue from "vue"; import Vuex from "vuex"; import { fetchNewsList } from "../api/index.js"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { news: [], }, mutations: { SET_NEWS(state, news) { state.news = news; }, }, actions: { FETCH_NEWS(context) { fetchNewsList() .then((response) => { // mutations 호출 context.commit("SET_NEWS", response.data); }) .catch(function(error) { console.log(error); }); }, }, });
※ actions
에서 바로 state
속성 값을 접근하여 사용하지 않고 mutations
속성 함수를 호출하는 이유는 [Vue.js] Vuex 포스팅 내 Vuex 구조와 [Vue.js] Vuex - 주요 기술 요소 포스팅 내 mutations
부분 확인
2. NewsView.vue
수정
<template> <div> <!-- state 속성 접근 --> <div v-for="user in this.$store.state.news">{{ user.title }}</div> </div> </template> <script> export default { created() { // Vuex의 dispatch() 호출 this.$store.dispatch("FETCH_NEWS"); }, }; </script> <style></style>
JobsView에 디스트럭처링(destructuring) 문법 사용하기
1. src/store/index.js
수정
import Vue from "vue"; import Vuex from "vuex"; import { fetchJobsList } from "../api/index.js"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { jobs: [], }, mutations: { SET_JOBS(state, jobs) { state.jobs = jobs; }, }, actions: { // destructuring FETCH_JOBS({ commit }) { fetchJobsList() .then(({ data }) => { commit("SET_JOBS", data); }) .catch((error) => { console.log(error); }); }, }, });
2. JobsView.vue
수정
<template> <div> <div v-for="job in this.$store.state.jobs">{{ job.title }}</div> </div> </template> <script> export default { created() { this.$store.dispatch("FETCH_JOBS"); }, }; </script> <style></style>
AskView에 Map Helper 함수 이용하기
1. src/store/index.js
수정
import Vue from "vue"; import Vuex from "vuex"; import { fetchAskList } from "../api/index.js"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { ask: [], }, getters: { fetchedAsk(state) { return state.ask; }, }, mutations: { SET_ASK(state, ask) { state.ask = ask; }, }, actions: { FETCH_ASK({ commit }) { fetchAskList() .then(({ data }) => { commit("SET_ASK", data); }) .catch((error) => { console.log(error); }); }, }, });
2. AskView.vue
수정
<template> <div> <div v-for="item in fetchedAsk">{{ item.title }}</div> </div> </template> <script> import { mapState, mapGetters } from "vuex"; export default { computed: { // #3 mapGetters 사용 ...mapGetters(["fetchedAsk"]), // #2 map State 사용 // ...mapState({ // ask: state => state.ask // }), // #1 속성 접근 시 간단하게 하는 기본방법(map helper 함수 미사용) // ask() { // return this.$store.state.ask; // } }, created() { this.$store.dispatch("FETCH_ASK"); }, }; </script> <style></style>
store 속성 모듈화
mutations 모듈화
src/store/mutations.js
생성
export default { SET_NEWS(state, news) { state.news = news; }, SET_JOBS(state, jobs) { state.jobs = jobs; }, SET_ASK(state, ask) { state.ask = ask; }, };
actions 모듈화
src/store/actions.js
생성
// actions에서 사용할 항목 import // src/store/index.js에서는 미사용하기 때문에 삭제 import { fetchNewsList, fetchJobsList, fetchAskList } from "../api/index.js"; export default { FETCH_NEWS(context) { fetchNewsList() .then((response) => { context.commit("SET_NEWS", response.data); }) .catch((error) => { console.log(error); }); }, FETCH_JOBS({ commit }) { fetchJobsList() .then(({ data }) => { commit("SET_JOBS", data); }) .catch((error) => { console.log(error); }); }, FETCH_ASK({ commit }) { fetchAskList() .then(({ data }) => { commit("SET_ASK", data); }) .catch((error) => { console.log(error); }); }, };
src/store/index.js
수정
import Vue from "vue"; import Vuex from "vuex"; // mutations, actions import import mutations from "./mutations.js"; import actions from "./actions.js"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { news: [], jobs: [], ask: [], }, getters: { fetchedAsk(state) { return state.ask; }, }, mutations, actions, });
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
[Vue.js] Hacker News - 컴포넌트 공통화 (0) | 2020.09.23 |
---|---|
[Vue.js] Hacker News - 라우터 실전 (0) | 2020.09.21 |
[Vue.js] Hacker News - API 구현 (0) | 2020.09.17 |
[Vue.js] Hacker News - 라우터 기본 (0) | 2020.09.17 |
[Vue.js] Hacker News - 소개 및 프로젝트 설정 (0) | 2020.09.17 |
댓글