모든 액션 Vuex 전 콜 변환

모든 액션 Vuex 전 콜 변환

Vuex에서는 변환이 커밋될 때마다 작업을 수행하는 플러그인을 작성할 수 있습니다.비슷한 기능을 가지고 행동할 수 있는 방법이 있을까요?

vuexfire 라이브러리와 같은 작업을 "향상"할 수 있습니다. 이것이 가장 좋은 방법입니까?

제 목표는 현재 보류 중인 Ajax 콜의 수/여부를 추적하고 그 번호를 바탕으로 자동으로 애니메이션을 표시하는 것입니다.

편집: 명확하게 설명하자면 Vuex만 사용하여 추가 라이브러리를 가져오지 않고 이 작업을 수행할 수 있는 방법이 있는지 궁금합니다.

Vuex v2.5 이후로는subscribeAction스토어의 각 디스패치액션 후에 호출되는 콜백 함수를 등록합니다.

콜백이 수신됩니다.action디스크립터(descriptor)type그리고.payloadProperties)를 첫 번째 인수로 하고 스토어의state두 번째 인수로요.

이에 대한 설명서는 Vuex API 참조 페이지에 있습니다.

예를 들어 다음과 같습니다.

const store = new Vuex.Store({
  plugins: [(store) => {
    store.subscribeAction((action, state) => {
      console.log("Action Type: ", action.type)
      console.log("Action Payload: ", action.payload)
      console.log("Current State: ", state)
    })
  }],
  state: {
    foo: 1
  },
  mutations: {
    INCREASE_FOO(state) {
      state.foo++;
    },
  },
  actions: {
    increaseFoo({ commit }) {
      commit('INCREASE_FOO');
    }
  }
});

new Vue({
  el: '#app',
  store,
  methods: {
    onClick() {
      this.$store.dispatch('increaseFoo');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>

<div id="app">
  Foo state: {{ $store.state.foo }}
  <button @click="onClick">Increase Foo</button>
</div>

3.1.0 이후 subscribeAction에서는 서브스크라이버 핸들러를 액션디스패치 전 또는 후에 호출할 것인지 지정할 수도 있습니다(기본 동작은 이전입니다).

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})

매뉴얼: https://vuex.vuejs.org/api/ #http://flashion

언급URL : https://stackoverflow.com/questions/47066028/call-mutation-before-every-action-vuex