vuejs2 - VueJs + Vuex + mapActions

Question

在文档中，除了通过 Action 调用的突变之外，状态是不可变的......好吧。

我在我的组件中使用 mapGetters、mapActions ...

商店:

export default {
  namespaced: true,

  state: {
    color: "violet"
  },
  mutations: {
      changeColor(state, newColor) {
          state.color = newColor
      },
  },
  actions: {
    changeColor({ commit }, newColor) {
      commit('changeColor', newColor)
  }
 }

组件:

...
methods: {
    ...mapActions({
      setColor: 'store/changeColor',
    }),
    myMethodCallByButton(){
       this.setColor("blue").then(response => {
          console.log("change Color done")
       },err => {
          console.log("change Color error")
       })
    }
...

该方法运行良好，商店已更新，除非我从未收到 console.log ()。

文档中写到 mapActions 等同于 this.$store.dispatch。

• 为什么我没有收到消息？
• 还有其他解决方案吗？

PS:我想保留 mapGetters map ，mapActions .. 我不喜欢调用 this.$store.dispatch

PS2:我使用商店中的模块

谢谢

Answer 1

每个 Vuex action 都会返回一个 Promise。

Vuex wraps the results of the action functions into Promises .所以 changeColor Action 在:

actions: {
  changeColor({ commit }, newColor) {
    myAsyncCommand();
  }
}

返回一个 Promise，它解析为 undefined 并且 不会等待完成 myAsyncCommand();的异步代码(如果不包含异步代码，则无需等待)。

发生这种情况是因为上面的代码与以下代码相同:

  changeColor({ commit }, newColor) {
    myAsyncCommand();
    return undefined;
  }

当 .dispatch('changeColor', ...) 时，Vuex 会返回 Promise.resolve(undefined)。

如果您希望操作返回的 Promise 等待，您应该返回一个 Promise 来执行等待自己的属性。大致如下:

  changeColor({ commit }, newColor) {
    return new Promise((resolve, reject) => {
      myAsyncCommand().then(resolve);
    });
    // or, simply: return myAsyncCommand();
  }

下面的演示实现有更多细节:

const myStore = {
  namespaced: true,
  state: { color: "violet" },
  mutations: {
      changeColor(state, newColor) {
          state.color = newColor
      }
  },
  actions: {
    changeColor_SIMPLE({ commit }, newColor) {
      commit('changeColor', newColor)
    },
    changeColor_COMPLICATED_NO_PROMISE({ commit }, newColor) {
        setTimeout(() => {
          commit('changeColor', newColor)
        }, 2000)
    },
    changeColor_COMPLICATED_WITH_PROMISE({ commit }, newColor) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('changeColor', newColor)
          resolve();
        }, 2000)
      });
    }
  }
};
const store = new Vuex.Store({
  modules: {
    store: myStore,
  }
});
new Vue({
  store,
  el: '#app',
  methods: {
    ...Vuex.mapActions({
      setColorSimple: 'store/changeColor_SIMPLE',
      setColorComplicatedNoPromise: 'store/changeColor_COMPLICATED_NO_PROMISE',
      setColorComplicatedWithPromise: 'store/changeColor_COMPLICATED_WITH_PROMISE',
    }),
    myMethodCallByButton(){
       this.setColorSimple("blue")
       	.then(response => console.log("SIMPLE done"),err => console.log("SIMPLE err"));
      this.setColorComplicatedNoPromise("blue")
       	.then(response => console.log("NO_PROMISE done"),err => console.log("NO_PROMISE err"));
      this.setColorComplicatedWithPromise("blue")
       	.then(response => console.log("WITH_PROMISE done"),err => console.log("WITH_PROMISE err"));
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>color: {{ $store.state.store.color }}</p>
  <button @click="myMethodCallByButton">click me and WAIT for 2s</button>
</div>

更新/每条评论:

Even if the mapAction / dispatch returns a promised, I am in my case obliged to add a promise to wait for the end of the "mutation". I thought, from the documentation, that it was precisely managed via the mapAction. Is it exact?

如果一个 Action 只调用一个突变，例如:

actions: {
  changeColor({ commit }, newColor) {
    commit('changeColor', newColor)
    return undefined; // added for clarity
  }
}

那么返回的Promise只会在commit()完成之后执行。

这不会发生，因为 Vuex 管理等待突变(commits)。

之所以会这样，是因为无需等待。这是因为 Vuex 需要:mutations must be synchronous operations .

由于突变是同步的，上面的return行只会在前一行的代码之后执行(commit('changeColor', newColor))。

注意:如果你的 mutation 有异步代码，你应该让它们同步，因为这违背了 Vuex 的正常工作方式，并且可能产生各种意想不到的行为。