Vuex

VuexはJavaScriptフレームワークの1つであるVueです.jsの正式なグローバルステータス管理ライブラリは、大規模なプロジェクトほど必要です.
Vuexの構造は4つに分けられます.

State

stateはdataであってもよいし、より簡単な変数であってもよい.
この状態は、後で説明する変異によってのみ変更できます.もちろん、状態が変異によって変更されると、再表示されます.

Mutations

変異は関数によって状態を変える唯一の方法である.
方法に似ている.
それは関数から構成され、パラメータを受信することができ、第1のパラメータはstateを受信することができ、第2のパラメータは有効負荷を受信することができる.
関数で構成されていますが、直接呼び出すことはできません.commitキーで呼び出すしかありません.
ex)

store.commit('setData', payload)

Actions

Actionはvarianceに似ていますが、非同期操作を実行できます.
stateを変更する必要がある場合は、actionでcommit呼び出し変異を使用して変更することもできます.
Actionも関数で構成され、最初のパラメータはcontextであり、context内部にはstate、commit、dispatchなどの属性が含まれている.
2番目のパラメータはペイロードです.
commitで変異を呼び出すとdispatchでactionが呼び出されます.
その後、コンテキスト内部のdispatchでactionから他のactionを呼び出すことができます.
ex)

store.dispatch('setData', payload)

Getters

getterはcomputedに似ています.
返されるデータの計算結果を計算すると、getterはステータス演算を実行し、結果を返します.

全体の例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello'
  },
  mutations: {
    changeMessage (state, newMsg) {
      state.message = newMsg
    }

  },
  actions: {
    callMutation ({ state, commit }, { newMsg }) {
      commit('changeMessage', newMsg)
    }
  },
  getters: {
    getMsg (state) {
      return `${state.message} => Length : ${state.message.length}`
    }
  }
})