Vuex(개념)

!! 나중에 필요하면 더 정리할 내용 !!
- 응용 getters에서 getters호출, actions에서 actions호출 (quick vue 366p 참고)
- vuex helper 속성 등록 방법 객체 전개 연산자 등록, 명칭 바꿔서 등록
   (명칭 : https://rnwns2.tistory.com/37?category=391381)
   (객체 전개 연산자 등록 : https://vuex.vuejs.org/kr/guide/state.html)
- 모듈화, 여러 저장소 

- vuex

- 단방향 데이터 흐름

- vue.js의 상태관리를 위한 라이브러리

- 공용으로 필요한 데이터를 중앙 저장소에서 관리하여 필요한 곳에 쉽게 전달할 수 있는 역할

store 등록

- main.js와 index.js에서 아래 코드를 작성하면 모든 컴포넌트에서 저장소(Store)객체를 this.$store로 접근 가능

// src/main.js
import store from './store';

new Vue({
  store,
  ... 생략
})

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

 

 

State : 상태

- 컴포넌트 간에 공유할 데이터

// state 형식

state: {
        num : 10,
        currentRegion : "all",
    },

 

Mutation : 변이

- 변이(Mutation)의 목적은 상태(State)의 변경

- 상태의 변경과 관련이 없는 작업은 변이 내부에서 실행 하지 않도록 하기

- 변이(Mutation)는 동기적인 작업

   1. 비동기 처리 가능하지만 사후 스냅샷 캡쳐 후 상태가 변경 되기때문에 어떻게 변경되었는지 추적하기 힘듬

// mutations 형식
// state.속성 => 기존의 데이터 값
// payload.속성 => 변경할 데이터 값

mutations: {
        [Constant.CHANGE_REGION] : (state, payload) => {
            state.currentRegion = payload.region;
        },
    },

 

Action : 액션

- 비동기

- dispatch()

// mutations 형식
// state.속성 => 기존의 데이터 값
// payload.속성 => 변경할 데이터 값

actions: {
        [Constant.DELETE_REGION] : ({state, commit}, payload) => {
            store.commit(Constant.DELETE_REGION, payload);
        }
    }

 

Getter : 게터

- 특정 컴포넌트에 사용되는 똑같은 값을 중복해서 계산하지 않고 재사용하고 싶을때 쓰임(중복 코드를 막아줌)

  ex) 한 페이지에 글을 최대 10개 보여주는 계산식을 모든 게시판에 적용

- computed처럼 함수 형식으로 작성 해야한다.

   1. 함수 인자에 state를 받아와야 한다

// getters 형식

getters: {
        if(state.currentRegion == "all") {
                return state.countries;
            } else {
                return state.countries.filter(c => c.region == state.currentRegion)
            }
    },

 

변이 vs 액션

	변이(Mutation)	액션(Action)
인자	상태(state), 페이로드(payload)	저장소(store)객체, 페이로드(payload) - 상태(state) - 변이(mutation) - 게터(getter) - 액션(acttion) - commit
기능	- 저장소(store)의 상태(state)를 변경 - 동기	- 여러 변이(mutation)를 commit()할 수 있다. - 다른 액션을 dispatch()할 수 있다. - 비동기