Vue.js - Vuex

Vuexはビューのステータス管理モードとライブラリです

画面(View)->イベント励起->データ変更(State)

Vuex技術要素

state

:複数の構成部品間で共有されるデータ

国家宣言

:メッセージという名前のステータスを定義します

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  }
})

ステータス・アクセス

<div>{{ this.$store.state.message }}</div>

getters

:state値が変化すると、変化の違いが自動的に反映されて値が計算されます.
  計算属性と一致

getters宣言

:逆メッセージ属性宣言、逆メッセージ文字列を:state値のmessageに反転

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  },
  getters: {
    reverseMessage(state) {
      return state.message.split('').reverse().join('');
    }
  }
})

gettersアクセス

<div>{{ this.$store.getters.reverseMessage }}</div>

mutation

:state値を変更する唯一の方法です.stateは常に「変異」に変更されます.
  メソッド属性と一致

突然変異宣言

:ステータス値message文字列をreverseMessage()で反転します.

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  },
  mutations: {
    reverseMessage(state) {
      state.message = state.message.split('').reverse().join('');
    }
  }
})

へんいよびだし

:commit()を使用して変異を呼び出す

new Vue({
  methods: {
    reverseMsg() {
      this.$store.commit('reverseMessage');
    }
  }
})

ここでgettersと突然変異の違いは何ですか?
伝達因子は突然変異だけが得られる.
gettersはcomputedに登録されていますが、突然メソッドに登録されます.

aciton

:変異から非同期処理ロジックへの属性の定義

行動宣言

:fetchMessage()はHTTP通信を処理するため,commitにより非同期論理,getで受信した応答を音楽のパラメータとして送信する.

new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    reverseMessage(state, data) {
      state.message = data.split('').reverse().join('');
    }
  },
  actions: {
    fetchMessage(context) {
      axios.get(url).then(function(response) {
        context.commit('reverseMessage', response.message);
      });
    }
  }
})

アクションの呼び出し

:dispatch()を使用してactionを呼び出す

new Vue({
  methods: {
    getMessage() {
      this.$store.dispatch('fetchMessage');
    }
  }
})