Vue Store
각 컴포넌트 사이에서 데이터를 전달하는 방법에는 상황에 따라 여러가지가 있다.
Store 라는 개념또한 컴포넌트사이에서 데이터를 전달하기 위해 사용되는 방식중 하나인데 Store는 어떨때 필요할까???
그 전에 각 상황에 따른 컴포넌트 간의 데이터 전달 방법에 대해 알아보자
부모컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 Props를 통해 전달한다.
상/하위 컴포넌트 관계에서는 Provide/Inject 로 데이터를 전달할 수 있다.
형제 컴포넌트들 끼리의 데이터는 어떻게 전달할까?
위와같은 상황에서 Search에서 MovieList로 데이터를 넘겨줘야할 때 두 컴포넌트의 관계는 형제관계이다.
🤔 이때 데이터를 어떻게 넘겨줘야할까?
-> 방법은 Home이라는 부모 컴포넌트로 데이터를 전달해 MovieList가 해당 데이터를 받도록 하는 것 이다.
-> 이럴경우 단점은 불필요한 Home은 데이터를 알아야한다.
🤔 데이터를 넘겨줘야하는 또 다른 상황
👉 Search 컴포넌트에서 만들어진 데이터를 About 데이터에서 사용해야 한다면?
많은 컴포넌트에서 데이터를 거져야하는 것을 알 수 있다.
이때 Vuex(Store)가 필요하다
Vuex(Store) 란?
-> Vuex 라는 중앙집중식 상태관리 라이브러리를 사용하는 방식을 통상적으로 store라 부른다.
-> store는 데이터를 중앙집중화 하여 관리할 수 있는 장소를 의미한다.
🤔 store를 사용하면 좋은 장점은 뭐가 있을까?
👉 store라는 매개체를 통해 프로젝트에 존재하는 어떤 컴포넌트에도 데이터를 전달할 수 있다는 장점이 존재한다
vuex 의 상태관리 구조
vue 컴포넌트에서 this.$store.dispatch를 통해 store의 actions 에 접근할 수 있다..
this.$store.dispatch('actions 에 정의된 메서드 이름을 넣는다')
백엔드에서 불러온 api를 actions 에서 호출하고 받아온 데이터를 mutations 를 통해 state에 넣어줄 수 있다.
즉 actions 에서 바로 state에는 접근 불가
다른 컴포넌트에서 store에 선언된 데이터 접근 방법
-> this.$store.state.state에정의된 데이터 이름
//store의 index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
export const store = new Vuex.Store({
state:{
news:[]
},
getters:{ //store에 있는 computed
fetchedAsk(state) {
return state.ask;
}
}
mutations: { //mutations 에서는 state 에 접근할 수 있도록 첫 번째 인자에 state 제공
SET_NEWS(state,news) {
state.news = news;
}
},
actions: { // actions 에서는 mutations 에 접근할 수 있도록 첫 번째 인자에 context를 제공
FETCH_NEWS(context) {
fetchNewsList()
.then(response => {
context.commit('SET_NEWS',response.data)
})
catch(error =>{
~~~
});
}
}
})
// Vue.js 완벽가이드 - 실습과 리팩토링으로 배우는 실전 개념 일부 코드 가져옴..위에 store 관련 코드에서 getters 부분을 컴포넌트에서 접근할 때는
import {mapGetters} from 'vuex'
export default {
computed: {
...mapGetters({
basic: 'fetchedBasic' // ''로 넣는 부분이 store의 getters에 적은 이름을 넣으면 된다.
}),
}
}
export default {
computed: {
...mapGetters([
'fetchedBasic' // mapGetters 에서 배열 표기법 사용시 바로 store에 사용된 getters에 대해 바로 접근이 가능하다.
]),
}
}-> ...mapGetters 의 객체 및 배열 표기법에 대한 차이도 알아보자 (map 핼퍼함수?? 관련 부분을 찾아보자)
store 모듈화 방법
store 폴더 아래에 state,getters,actions,mutations 에 대한 파일을 만든다.
각 내용들을 위의 폴더에 적고 index.js 에서 위의 파일들을 가져와 연결해준다.
ex) mutations 만 분리해본다면..
// store 폴더 및의 index.js 파일
import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations.js';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
news:[],
jobs:[],
ask:[]
},
getters: {
fetchedAsk(state) {
return state.ask;
}
},
mutations //이렇게 하면 위에서 import 된 mutations 를 가져온다 key value 가 같으면 key를 쓰지 x 도 됨
})