Vuexとは?

Vue.jsステータス管理用のモードとライブラリ.他のステータス管理モードやリポジトリと比較して、ビューのアクティビティスキームをより効果的に利用して画面を更新できる点が異なります.

なぜVuexを使うのですか?

従来のvueは、素子間通信時にprops、emitなどをサポートしている.
しかし、100個の素子がhelloという変数を使用するとどうなりますか?
毎回props、emitを使って通信するのは、とても面倒なことです.
だから登場したのがVUEX
とにかく、よく使う情報をStoreにまとめて管理!これがVuex誕生の背景です

Vuexフルフローチャート

上の緑の点線部分はVuexが担当している部分です.
ここで、要素間で共有されるすべてのデータは、Stateと呼ばれる位置に格納される.

Vuexが素子間でデータを転送する必要はありません

まず、Vuexなしでpropsとemitの転送を使用することを理解しましょう.
👇 Parent.vue

<template>
  <div>
    <p>Parent Counter : {{parentnum}}</p>
    <child v-bind:childnum="parentnum"/>
    <button @click='addnum'>+</button>
    <button @click='subnum'>-</button>
  </div>
</template>
<script>
import Child from './Child.vue';

export default {
  components:{
    Child,
  },
  data(){
    return{
      parentnum:0,
    }
  },
  methods:{
    addnum(){
      return this.parentnum++;
    },
    subnum(){
      return this.parentnum--;
    }
  }

}
</script>

親コンポーネントApp.Vueは、サブエレメントChildの命令v-bindを使用して、その変数parentnumをChildに伝達する.
👇 Child.vue

<template>
  <div>
    <p> Child counter : {{ childnum }} </p>
  </div>
</template>
<script>
export default {
  props:["childnum"]
}
</script>

サブアセンブリApp.vue(child)は、props属性を使用して親コンポーネントからデータを受信する.
結果ParentおよびChildはparentnumおよびchildnumであった.同じデータを共有します.
でもChild 1 Child 2 Child 3なら...無数のサブコンポーネントがあると、データの共有が面倒になります.
次に、Vuexのstoreを使用してデータを管理および共有します.

Vuexによるデータ転送

1.vuexのstoreを登録する

👇 store.js ! これは慣例に従って決められた名前です.

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

Vue.use(Vuex);

export const store = new Vuex.Store({
  // ...
});

今はmainjsファイルで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.ステータス登録

👇 store.js

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

Vue.use(Vuex);


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

stateで定義されるcounter属性は、Parentコンポーネントで使用されるデータ属性parentnumと同じ役割を果たす.前述の「ステータス管理モード」の章で説明したように、「stateは、構成部品間で共有するデータを表します.」

3.ステータスアクセス

stateに登録されたばかりのcounter属性は、要素のテンプレートコードから$store.state.counterにアクセスすることができる.
このような方法で.
👇 Parent.vue

<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>

これにより、Childは、パラメータからv-bindに値を渡すことなく、Storeからデータにアクセスできます.