Vue vuex

すべてのコンポーネントの一元データ・リポジトリとして、ステータスを予測可能に変更できます。

// /src/store
import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
      cart: [
        {
          product_id: 1,
          product_name: "아이폰 거치대",
          category: "A",
        },
      ],
    };
  },
  getters: {
    cartCount: (state) => {
      return state.cart.length;
    },
  },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    },
  },
  actions: {
    increment(context, payload) {
      //비동기 처리 로직 수행 가능
      context.commit("increment", payload);
    },
  },
});

export default store;

// /views/StoreAccess
<template>
  <p>Count : {{ count }}</p>
  <p>cartCount : {{ cartCount }}</p>
  <button type="button" @click="increment">Increment</button>
</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    cartCount() {
      return this.$store.getters.cartCount;
    },
  },
  methods: {
    increment() {
      // this.$store.commit("increment", 1);
      this.$store.dispatch("increment", 1);
    },
  },
};
</script>

state-プロジェクト全体に共通する変数を定義します。stateで定義された変数は、常に計算プロパティを使用して変更を追跡できます。

computed: {
  count() {
    return this.$store.state.count;
  }
}

getters-stateに格納されている変数はgettersとして簡単にインポートできます。state値をそのまま入力するのとは異なり、演算によって値を変更できます。

computed: {
  cartCount() {
    return this.$store.getters.cartCount;
  }
}

突然変異-ステータスで定義された変数を直接変更することはできません。したがって,突然変異を利用して状態を変化させる.突然変異は同期処理される。変異で定義された関数をcommitで呼び出します。

methods: {
  increment() {
    this.$store.commit('increment');
  }
}

Actionsは突然変異とは異なり,非同期で処理されている。storeが非同期処理ロジックを管理できるようにします。

actions: {
  increment(context) {
    context.commit('increment');
  }
}