vuex 데이터 전달(상위->하위)

참고한 게시물 >

https://xn--xy1bk56a.run/vuex/3-cart/

https://joshua1988.github.io/web-development/vuejs/vuex-start/

 

1. vuex 설치, 설정

1) vuex 설치

NPM 설치 명령을 사용하여 Vuex 라이브러리를 프로젝트에 설치한다.

npm install vuex

 

2) vuex 플러그인 등록

프로젝트 루트 위치에 store/index.js 파일을 만든 후, Vuex 라이브러리를 Vue 애플리케이션의 플러그인으로 등록하는 코드를 작성한다. 그리고 Vuex를 통해 Store 객체를 생성하는 구문을 설정한다.

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  // 스토어 객체 옵션 설정
})

 

- vuex 속성 설정

스토어 객체 생성 과정에서 설정 가능한 속성은 필요에 따라 선택적으로 추가할 수 있다.

const store = new Vuex.Store({
  state: { ... },     // = 데이터 (data)
  getters: { ... },   // = 계산된 속성 (computed Properties)
  mutations: { ... }, // = 데이터 변경 (sync)
  actions: { ... }    // = 메서드 (methods, async)
})

 

3) 프로젝트의 main.js에 store.js 등록

// main.js
import Vue from "vue";
import App from "./App.vue";
// store.js를 불러오는 코드
import { store } from "./store";

new Vue({
  el: "#app",
  // 뷰 인스턴스의 store 속성에 연결
  store: store,
  render: h => h(App)
});

 

2. 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달

1) store.js에 state 추가

export const store = new Vuex.Store({
  // counter라는 state 속성을 추가
  state: {
    counter: 0
  }
});

 

2) 상위 컴포넌트에서 state에 접근

<!-- App.vue(Parent) -->
</template>
  <div id="app">
    Parent counter : {{ $store.state.counter }} <br />
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>

    <!-- 기존 코드 -->
    <!-- <child v-bind:num="counter"></child> -->
    <child></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    child: Child
  },
  methods: {
    addCounter() {
      this.$store.state.counter++;
    },
    subCounter() {
      this.$store.state.counter--;
    }
  }
};
</script>

 

3) 하위 컴포넌트에서 state에 접근

<template>
  <div>
    Child counter : {{ $store.state.counter }}
    <button>+</button>
    <button>-</button>
  </div>
</template>