[Vue.js] Vuex

Vuex 란?

Vuex : 상태 관리 라이브러리 , 중앙 집중식 저장소 역할
Vuex는 props 와 emit과 병행하여 사용할 수 있다.

Vuex 사용 이유

Vuex는 반복되는 props와 emit으로 데이터 관리가 복잡해지고, 데이터의 위치 파악 및 관리가 어려워지기 때문에 사용된다.

Vuex 사용

Vuex를 사용하기 위해서는 store이라는 폴더를 사용해야 한다.
Src -> store -> index.js
index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // state에 기본 data
    myName: "아버지",
    myAge: 40,
  },
 // state를 수정할 수 있는 메서드를 저장
  mutations: {
    // state의 data를 변경하기 위한 함수!
    SET_MY_NAME(state,data){
      state.myName = data;
    },
    SET_MY_AGE(state,data){
      state.myAge = data;
    }
  },
});

vuex를 통해 store의 정보 가져오기

방법1) import -> computed -> 콧수염
방법2) <template> 내에서 {{ $store.state.myName }}

vuex를 통해 store 정보 바꾸기

방법1) import -> …mapmutations -> this.set_myname;
방법2) methods에서 this.$store.commit(“mutations의 함수 이름”,바꿀 값)

Mutation과 State를 사용해 데이터 관리를 할것입니다.
store에서 데이터들을 저장하였다면, 사용을 해보는 코드를 최상위 파일에서 작성해보겠습니다.
Home.vue

<template>
  <div class="home">
    <h1>할아버지</h1>
    {{ myName }}
    <br />
    {{ myAge }}
    <br />
    <button v-on:click = "gettingOld">늙어지는 버튼</button>
    <HomeChild />
  </div>
</template>

<script>
// mapState와 mapMutations은 vuex에서 지원하는 LIB, 이름 정확해야 함
import { mapState, mapMutations } from "vuex";
import HomeChild from "../components/HomeChild.vue";
export default {
  name: "Home",
  components: {
    HomeChild,
  },
  // 어떤 데이터가 화면에 붙어있을때, 데이터가 변환하는걸 감지하여 자동으로 연산해주는 vuex 기능
  computed: {
    // ...(스프레드, 쓰리닷) : 배열 문자열 등 여러 데이터의 집합으로 구성된 데이터를 풀어버리는 역할
    ...mapState(["myName", "myAge"]),
  },
  methods: {
    ...mapMutations(["SET_MY_AGE"]),
    gettingOld(){
      // age의 data를 80으로 바꿔준다
      this.SET_MY_AGE(80);
    }
  }
};
</script>

<style scoped></style>

사용 순서
1. vuex를 사용하기 위해서는 import { mapState, mapMutations } from "vuex" 작성
저장된 State를 사용하기 위해서는 mapState(LIB이므로 똑같아야 한다)를 import한다.
저장된 Mutation을 사용하기 위해서는 mapMutations를 import한다.
2. computed : {...mapState(["myName", "myAge"]),}
3. 상단에 사용하기 위해 {{ }}을 이용하여 붙여주기

최상위 파일 뿐 만아니라 자손들도 똑같이 작성해주어 적용시킬 수 있다.

핵심
데이터들은 최상위 데이터(부모)에서 자손으로 넘겨주는 게 아닌, vuex(store)에서 저장된 데이터를 부모 와 자손에게 건네준다는것!!