Vuex（状態管理）

vuexはvuejsアプリケーションのステータス管理モードライブラリ.
任意の構成部品にアクセスして書き込むことができる中央リポジトリです.データのステータスが変化すると、データのリポジトリとして機能するだけでなく、変更またはステータスの変化を処理できます.

vuexのインストール

npm install vuex

vuexの使用

main.jsと同じ位置にあるstore.jsファイルを作成します.

storeでstateで変数を宣言する場合は、突然変異の関数でのみ変数にアクセスできます.

// store.js
import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count = state.count + 1;
    },
  },
});

export default store;

mainでは、すべてのコンポーネントにstoreを書き込むことができます.jsにコードを追加します.

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import mixins from "./mixins";
import store from "./store";
import VueSweetAlert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";
import i18nPlugin from "./plugins/i18n";

const i18nStrings = {
  en: {
    hi: "Hello!",
  },
  ko: {
    hi: "안녕하세요",
  },
};

const app = createApp(App);
app.use(router);
app.mixin(mixins);
app.use(VueSweetAlert2);
app.use(i18nPlugin, i18nStrings);
app.use(store);
app.mount("#app");

viewsフォルダでStoreAccessにアクセスします.vueファイルを作成します.

// StoreAccess.vue
<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button type="button" @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    },
  },
};
</script>

<style scoped></style>

Computedを使用してstoreのcountが変更されたかどうかを監視し、countというデータフィールドに戻します.

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

変異で定義された関数を呼び出すには、commitという関数を使用する必要があります.呼び出したい関数名をcommit関数のパラメータに渡せばよい.

this.$store.commit("increment");

storeは中央リポジトリであるため、すべてのコンポーネントが集中的に管理したいものはstoreによって管理されます.したがって、storeの変数を参照している構成部品が多い場合があります.そこで,変数が変更されたときに変更状態を管理し,状態変化を他の素子に渡すために,突然変異定義関数により,素子にcommitアクセスを用いるステップを作成した.すなわち,状態管理を系統的に行うためには,store中の変数に突然変異でしかアクセスできない.
たとえば、storeにユーザーログイン情報を書き込むことができます.また、ショッピングアプリケーションを実施する場合、ショッピングバスケットはstoreで管理することができる.

store使用例-カート

state内にcartという配列が宣言されます.gettersを使用してcartのすべての要素数とcategoryがAのcart要素数を返します.
stateに読み込まれた変数は、読み込まれた変数そのものです.getter関数にロードされる関数は、stateで定義された変数をgetter関数の関数から何らかの処理を行い、返される値をロードします.

// store.js
import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
      cart: [
        { product_id: 1, product_name: "아이폰 거치대", category: "A" },
        { product_id: 2, product_name: "블루투스 마우스", category: "B" },
      ],
    };
  },
  mutations: {
    increment(state) {
      state.count = state.count + 1;
    },
  },
  getters: {
    cartCount: (state) => {
      return state.cart.length;
    },
    productACount: (state) => {
      return state.cart.filter((p) => p.category == "A").length;
    },
  },
});

export default store;

// StoreAccess.vue
<template>
  <div>
    <h1>장바구니: {{ cartCount }}개</h1>
    <h1>장바구니 - category가 A인 것만 : {{ productACount }}개</h1>
    <h2>Count: {{ count }}</h2>
    <button type="button" @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    cartCount() {
      return this.$store.getters.cartCount;
    },
    productACount() {
      return this.$store.getters.productACount;
    },
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    },
  },
};
</script>

<style scoped></style>