从Vuex actions返回承诺

Question

我最近开始将一些东西从jQ迁移到一个更结构化的框架VueJS，我喜欢它！

从概念上讲，Vuex对我来说是一个范式的转变，但我相信我现在知道它是关于什么的，并且完全理解它！但也存在一些灰色地带，主要是从实现的角度来看。

我觉得这个设计很好，但不知道它是否与单向数据流的Vuex cycle相矛盾。

基本上，从一个操作返回一个promise(-like)对象被认为是一个好的实践吗？我把它们当作异步包装器，有失败的状态等等，所以看起来是一个很好的回报承诺的好时机。反之，变更器只是改变事物，并且是存储/模块中的纯结构。

Answer 1

Vuex中的actions是异步的。让调用函数(操作的发起者)知道某个操作已完成的唯一方法是返回一个Promise，并在稍后解决它。

下面是一个示例：myAction返回一个Promise，发出一个http调用，然后在稍后解析或拒绝该Promise -所有这些都是异步的

actions: {
    myAction(context, data) {
        return new Promise((resolve, reject) => {
            // Do something here... lets say, a http call using vue-resource
            this.$http("/api/something").then(response => {
                // http success, call the mutator and change something in state
                resolve(response);  // Let the calling function know that http is done. You may send some data back
            }, error => {
                // http failed, let the calling function know that action did not work out
                reject(error);
            })
        })
    }
}

现在，当您的Vue组件初始化myAction时，它将获得这个Promise对象，并可以知道它是否成功。以下是Vue组件的一些示例代码：

export default {
    mounted: function() {
        // This component just got created. Lets fetch some data here using an action
        this.$store.dispatch("myAction").then(response => {
            console.log("Got some data, now lets show something in this component")
        }, error => {
            console.error("Got nothing from server. Prompt user to check internet connection and try again")
        })
    }
}

正如您在上面看到的，返回Promise对actions非常有好处。否则，动作发起者就无法知道发生了什么，什么时候事情足够稳定，可以在用户界面上显示一些东西。

关于mutators的最后一点--正如您正确地指出的那样，它们是同步的。它们改变state中的东西，并且通常从actions调用。没有必要将Promises和mutators混合在一起，因为actions会处理这一部分。

编辑:我对单向数据流的Vuex循环的看法：

如果在组件中访问像this.$store.state["your data key"]这样的数据，那么数据流是单向的。

action的承诺只是让组件知道action已经完成。

该组件可以从上述示例中的promise resolve函数获取数据(不是单向的，因此不推荐)，或者直接从单向的$store.state["your data key"]获取数据，并遵循vuex数据生命周期。

上面的段落假设您的赋值器使用Vue.set(state, "your data key", http_data)，一旦在您的操作中完成了http调用。

Answer 2

关于一个已关闭的主题的信息：您不必创建promise，axios本身返回一个promise：

参考：https://forum.vuejs.org/t/how-to-resolve-a-promise-object-in-a-vuex-action-and-redirect-to-another-route/18254/4

示例：

    export const loginForm = ({ commit }, data) => {
      return axios
        .post('http://localhost:8000/api/login', data)
        .then((response) => {
          commit('logUserIn', response.data);
        })
        .catch((error) => {
          commit('unAuthorisedUser', { error:error.response.data });
        })
    }

另一个例子：

    addEmployee({ commit, state }) {       
      return insertEmployee(state.employee)
        .then(result => {
          commit('setEmployee', result.data);
          return result.data; // resolve 
        })
        .catch(err => {           
          throw err.response.data; // reject
        })
    }

等待异步的另一个示例

    async getUser({ commit }) {
        try {
            const currentUser = await axios.get('/user/current')
            commit('setUser', currentUser)
            return currentUser
        } catch (err) {
            commit('setUser', null)
            throw 'Unable to fetch current user'
        }
    },

Answer 3

操作

ADD_PRODUCT : (context,product) => {
  return Axios.post(uri, product).then((response) => {
    if (response.status === 'success') {  
      context.commit('SET_PRODUCT',response.data.data)
    }
    return response.data
  });
});

组件

this.$store.dispatch('ADD_PRODUCT',data).then((res) => {
  if (res.status === 'success') {
    // write your success actions here....
  } else {
     // write your error actions here...
  }
})