web-dev-qa-db-ja.com

Vue.js [vuex]ミューテーションからディスパッチする方法

JSONオブジェクトに適用したいフィルターのリストがあります。

私の突然変異は次のようになります。

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

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

フィルターがどのように機能するかにより、ユーザーがフィルターオプションの選択を解除すると問題が発生するため、単純にリストのダウンフィルターを続けることができないため、フィルターをすべて再適用する必要があります。

したがって、星フィルターまたはレビューフィルターに変更が加えられている場合（ユーザーがフィルターしている場合）、すべてのフィルターを実行する関数を呼び出す必要があります。

ここで私の最も簡単なオプションは何ですか？何らかのヘルパー関数を追加したり、実際に結果をフィルタリングする突然変異を呼び出すアクションを設定したりできますか？

javascriptvue.jsvuejs2vuex
19
Stephan-v

突然変異はそれ以上のアクションをディスパッチできませんが、アクションは他のアクションをディスパッチできます。そのため、1つのオプションは、アクションに突然変異をコミットさせてからフィルターアクションをトリガーさせることです。

別のオプションは、可能であれば、すべてのフィルターを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(...)
    }
  }
}
29
Matt