web-dev-qa-db-ja.com

vuex突然変異からの戻り値？ （新しく作成されたオブジェクトのID）

Vuexストアの一部にオブジェクトを作成してから、そのオブジェクトにIDを別のオブジェクトに渡そうとしていますが、ミューテーションは何も返さないため（この場合はID）、適切にそれを行う方法がわかりません）。

2つのストアオブジェクトは次のようになります。

// store/report.js
const state = {
    name: 'Untitled Report',
    subReportIds: []
};

// store/subReport.js
const state = { ... }

そして、このアクションで空白のレポートを作成し、次に空白のサブレポートを作成して、新しく作成したレポートにサブレポートIDを割り当てます。 （サブレポートは独立したエンティティであり、複数のレポートで使用できるため、ストア内の領域が異なります）

const actions = {
    createNewReport({ state, commit }) {
        commit(mutationTypes.CREATE_NEW_REPORT)
        // below doesn't work - i can't get return from mutation
        let newSubreportId = commit(mutationTypes.ADD_NEW_SUBREPORT)
        // if this worked, i'd then do something like
        commit(mutationTypes.ADD_SUBREPORT_TO_REPORT, newSubreportId)
    }
};

上記をどのように達成できますか？

vue.jsvuejs2vuex
18
Rudi

だから私に達成するための最良の方法は、変異をコミットする代わりにアクションをディスパッチすることです。 Vuexソースのメソッドを見ると、commitは実行されるだけで（したがってvoid）、dispatchはアクション（関数）から返す値を返します。

私の行動については、私は常に約束を返しますので、あなたが上記のようにそれらを構成することができます。例を示します。

fetchSomething ({ commit }) {
  return mockApiGetIds()
    .then(response => {
      commit({
        type: SOME_MUTATION,
        ids: response
      });

      return response;
    });
  },
12
Austio

免責事項：本当に良いアイデアかどうかはわかりませんが、少なくとも、うまくいくようです。アクションとプロミスを使用したり、IDをアクション...

ミューテーションでは、引数を渡すことができます。 （新しく作成されたIDのような）ミューテーションから値を返すには、その引数のプレースホルダーに書き込みます。

someMutation(state, arg){
   //...
   arg.out = {
      status : "succeed"
   }
}

//...

this.$store.commit('someMutation', arg);
if(arg.out !== "succeed") console.log("ERROR");
6
hl037_

突然変異から戻るだけで機能するのは素晴らしいことです...

それを追跡する問題に賛成してください： https://github.com/vuejs/vuex/issues/1437

それは将来的にそのようなことを可能にするかもしれません：

let myReturn = this.$store.commit('ADD_THING",{"name":"new_thing"});
// 'ADD_THING' adds a thing to an numerically indexed object and then returns the number.
console.log(myReturn); // {"id":42,"datestamp":1541145883085}
1
Alex