Vue.js 从 REST API 获取的 Vuex 渲染数据

异步获取数据的一种方法是在vuex store actions中使用promise.

Vue.http.get(API_URL)
  .then((response) => {
     //use response object      
  })
  .catch((error) => {
    console.log(error.statusText)
  });

证明我向this route提出了请求.您可以看到响应应该是什么样子.让我们将响应对象保存为状态.用户array.

store.js

const store = new Vuex.Store({
  state: {
    users: []
  },  
  mutations: {
    FETCH_USERS(state, users) {
      state.users = users
    }
  },
  actions: {
    fetchUsers({ commit }, { self }) {          
      Vue.http.get("https://jsonplaceholder.typicode.com/users")
        .then((response) => {
          commit("FETCH_USERS", response.body);
          self.filterUsers();   
        })
        .catch((error) => {
          console.log(error.statusText)
        });
    }
  }
})
    
export default store

您注意到提交后有self.filteruser()个方法.这是关键时刻.在此之前，我们是committing a mutation，这是同步操作，我们确信我们将有我们的react 存储.filterUsers()方法(don't forget to pass self parm)中可使用的状态

Users.vue

import store from "../store/store"

export default {
  name: 'users',
  created() {
    this.$store.dispatch("fetchUsers", { self: this })       
  },
  methods:{
    filterUsers() {
      //do something with users
      console.log("Users--->",this.$store.state.users)       
    }
  }
}

Better ways (ES6 & ES7)

ES6 Promises for asynchronous programming

//User.vue
created() {
  this.$store.dispatch("fetchUser").then(() => {
    console.log("This would be printed after dispatch!!")
  })
}

//store.js
actions: {
  fetchUser({ commit }) {
    return new Promise((resolve, reject) => {
      Vue.http.get("https://jsonplaceholder.typicode.com/users")
        .then((response) => {
          commit("FETCH_USERS", response.body);
          resolve();
         })
         .catch((error) => {
           console.log(error.statusText);
         });
    });
  }
}

ES7: async/await

为了摆脱回调地狱，并改进异步编程，请使用async函数，您可以promise 使用await.代码看起来更容易理解(就像它是同步的)，但是对于浏览器来说代码是不可读的，所以你需要Babel transpiler来运行它.

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // wait for actionA to finish
    commit('gotOtherData', await getOtherData())
  }
}