簡単な vuex を書く

以下は簡単な Vuex ストアの例です。

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0,
    message: 'Hello Vuex!'
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    getCount(state) {
      return state.count;
    },
    getMessage(state) {
      return state.message;
    }
  }
});

export default store;

この例の Vuex ストアには、状態、ミューテーション、アクション、およびゲッターが含まれています。

• state アプリケーションの状態が保存され、コンポーネント内でアクセスできる場所です。
• mutationsstate 状態を変更する関数が定義されており、最初のパラメータとしてオブジェクト  を受け取り 、commit メソッドを呼び出すことでトリガーできます。
• actionsdispatch メソッドの呼び出しによってトリガー できる非同期操作またはバッチ変更が含まれます 。
• getters 状態に保存されているデータをプロパティのように使用して、計算およびアクセスするためのメソッドを提供します。

ビジネス ニーズに応じて変更および拡張できます。アプリケーションでストアを使用する場合、オブジェクトstoreをインポートすることで、ストア内で定義されている状態、ミューテーション、アクション、およびゲッターにアクセスできます。