Vuex란?

데이터와 그 상태를 일괄 관리하는 "상태 관리"를 위한 확장 라이브러리.

애플리케이션 규모가 커지고, 컴퍼넌트의 수도 늘어나면,
같은 「data」에 액세스 하고 싶은 경우는, 親->子->孫->曽孫 와 같이 「props」 「emit」를 건네주어 가야 합니다. Vuex를 사용하면 모든 구성 요소에서 동일한 "data"에 액세스 할 수 있도록 전체 응용 프로그램의 리액티브 속성을 정의하고 관리 할 수 ​​있습니다.

┏━┳━┳━┳━┓
┃　　　　　　┃
┃ 컴포넌트 ┃
┃　　　　　　┃
┗━┻━┻━┻━┛

자동으로 반영 ↑

┏━┳━┳━┳━┓
┃　　　　　　┃
┃　Vuex　　　┃
┃　　　　　　┃
┗━┻━┻━┻━┛

↓ 자동으로 반영

┏━┳━┳━┳━┓
┃　　　　　　┃
┃ 컴포넌트 ┃
┃　　　　　　┃
┗━┻━┻━┻━┛

스토어 만들기

store는 애플리케이션 내에서 만든 "가상 데이터베이스와 같은 것"이라고 생각하십시오.

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import store from './store'; //追加

Vue.use(Vuex);

new Vue({
  el: '#app',
  store, // ストアをVueアプリケーションに登録する
  components: {
    MyApp
  },
});

단일 구성 요소마다 "store.js"를 읽어야하므로 저장소 인스턴스
Vue 어플리케이션의 루트에 등록하는 것으로, 컴퍼넌트의 인스턴스 프로퍼티을 $store 로서 어디에서라도 사용할 수 있게 된다.
Vue.use(プラグイン名) 플러그인 사용에 대한 설명
new 인스턴스 생성 전에 읽힌다.

store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state){
      state.count ++
    }
  }
})
export default store

Vuex의 기본 이미지

구성 요소에서 State（状態)를 업데이트하려면 アクション 및 ミューテーション를 사용하십시오.

State(상태)

스테이트는, 스토어에서 관리하고 있는 상태 그 자체.
상태는 ミューテーション 이외의 위치에서 변경할 수 없습니다.

getter (게터)

스테이트를 취득하기 위한 산출 데이터이며, computed muthods의 중간과 같은 존재.
JavaScript 파일에서 사용할 수 있는 이미지computed입니다.

Mutations(뮤테이션)

스테이트를 변경할 수 있는 유일한 메소드이며, 컴퍼넌트라고 하는 methods인수로 state 및 payload（コミットからの引数）

Commit (커밋)

여기에서 커밋은 등록 된 ミューテーション를 호출합니다 インスタンスメソッド.
컴퍼넌트에서 말하는 $emit와 닮아 있어 임의로 인수를 취할 수 있다.

Actions(액션)

비동기 처리를 포함할 수 있는 메소드.
데이터의 가공이나 비동기 처리를 행하고, 그 결과를 뮤테이션에 커밋한다.

dispatch (디스패치)

등록된 액션을 호출한다インスタンスメソッド.
다른 액션 내에서도 사용할 수 있다. 선택적으로 인수를 가질 수 있습니다.