Vue Store(Vuex) - State

Vuex

: vue는 컴포넌트 기반 프레임워크

: 컴포넌트간의 통신이나 데이터 전달을 유기적으로 관리하기 위해 vuex라는 저장소를 사용한다.

: state, mutations, actions, getters

: Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다.

: 어플리케이션의 모든 컴포넌트의 중앙 집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능

: Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅샷 내보내기/가져오기와 같은 고급 기능을 제공한다.

​

​

* 상태 관리(State Managerment)는 왜 필요한가

: 컴포넌트 기반 프레임워크(Vue)에서는 작은 단위로 쪼개진 여러개의 컴포넌트 화면을 구성합니다.

이에따라 컴포넌트간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다.

: props와 emit을 통해 데이터를 전달할때 1~2개의 컴포넌트면 상관없지만 여러개의 컴포넌트들이 계속해서 props를 사용해야 한다.

​

* 상태 관리(State Managerment)

: 상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴

뷰와 성격이 비슷한 프레임워크인 리액트(React)에서는 Redux, Mobx와 같은 상태 관리 라이브러리를 사용하고 있고 뷰에서는 Vuex 라는 상태관리 라이브러리를 사용한다.

​

​

​

Vuex 전체 흐름도

​

* state

: vue 컴포넌트에서 data를 의미

​

* mutations

: state를 변경하는 유일한 방법

​

* actions

: mutations와 비슷하지만 비동기작업이 가능하다.

​

​

- 상태 관리 패턴

상태 관리 구성요소는 크게 3가지가 있습니다.

* state : 컴포넌트 간의 공유할 data

* view : 데이터가 표현될 template

* actions : 사용자의 입력에 따라 반응할 methods

단방향 흐름 처리

​

- Vuex 설치 및 등록

​

1. npm install vuex

​

2. src/store/store.js

import Vue from 'vue'

import Vuex from 'vuex'

​

Vue.use(Vuex)

​

const store = new Vuex.Store({

// 각 store 모듈들

})

​

export default store

​

3. main.js에 store/index.js 파일을 불러와 등록

import Vue from 'vue'

import router from './router'

import store from './store/store'

​

new Vue({

el: '#app',

router,

store,

render: h => h(App)

})

​

- Vuex 튜토리얼 (state 등록)

//src/store/store.js

import Vue from 'vue'

import Vuex from 'vuex'

​

Vue.use(Vuex)

​

export const store = new Vuex.Store({

state: {

counter: 0

}

})

​

* state : 각 컴포넌트 간 공유할 data 속성을 의미

- Vuex 튜토리얼 (state 접근)

위 등록한 state에 접근하귀 위해선 "$store.state.counter" 로 접근할수 있다.

​

<!-- 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 },

// 기존 코드

// data () {

// return {

// counter: 0

// }

// },

methods: {

addCounter() {

this.$store.state.counter++;

},

subCounter() {

this.$store.state.counter--; } }

}

</script>