itsource

Vue.js[vuex] 변환에서 디스패치하는 방법

mycopycode 2022. 9. 3. 13:58
반응형

Vue.js[vuex] 변환에서 디스패치하는 방법

json 개체에 적용할 필터 목록이 있습니다.

내 돌연변이는 다음과 같습니다.

const mutations = {
    setStars(state, payload) {
        state.stars = payload;
        this.dispatch('filter');
    },

    setReviews(state, payload) {
        state.reviews = payload;
        this.dispatch('filter');
    }
};

필터 작동 방식 때문에 사용자가 필터 옵션을 선택 해제하면 문제가 발생하기 때문에 목록을 계속 다운필터링할 수 없기 때문에 필터를 다시 적용해야 합니다.

그래서 별 필터나 리뷰 필터(사용자가 필터링 중)에 변환이 이루어졌을 때 모든 필터를 실행하는 함수를 호출해야 합니다.

여기서 가장 쉬운 선택은 무엇입니까?실제로 결과를 필터링하는 돌연변이를 호출하는 일종의 도우미 기능이나 가능한 동작을 추가할 수 있습니까?

돌연변이는 추가 액션을 디스패치할 수 없지만 액션은 다른 액션을 디스패치할 수 있습니다.따라서 하나의 옵션은 액션에 의해 변환이 커밋되고 필터 액션이 트리거되는 것입니다.

가능한 경우 다른 옵션은 모든 필터에 대해getters데이터 변경에 대해 계산된 속성처럼 자연스럽게 반응합니다.

다른 액션을 호출하는 액션의 예:

// store.js
export default {
  mutations: {
    setReviews(state, payload) {
      state.reviews = payload
    }
  }

  actions: {
    filter() {
      // ...
    }

    setReviews({ dispatch, commit }, payload) {
      commit('setReviews', payload)
      dispatch('filter');
    }
  }
}


// Component.vue
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['setReviews']),
    foo() {
      this.setReviews(...)
    }
  }
}

변환에 의한 액션을 실제로 디스패치하려면this. 예:

const actions = {
  myAction({ dispatch, commit }, { param }) {
  // Do stuff in my action
  }
}

const mutations = {
  myMutation(state, value) {

    state.myvalue = value;
    this.dispatch('myModule/myAction', { param: 'doSomething' });
  },
}

언급URL : https://stackoverflow.com/questions/44309627/vue-jsvuex-how-to-dispatch-from-a-mutation

반응형