从 REST API 获取的 Vuex 渲染数据

新手上路,请多包涵

对于这样的组件

<template>
  <div>
    <router-link :to="{name:'section', params: { sectionId: firstSectionId }}">Start</router-link>
  </div>
</template>

<script lang="ts">
  import { mapActions } from "vuex"

  export default {
    mounted() {
      this.getSectionId()
    },
    computed: {
      firstSectionId() {
        return this.$store.state.firstSectionId
      }
    },
    methods: mapActions(["getSectionId"])
  }
</script>

店铺:

 const store: any = new Vuex.Store({
    state: {
        firstSectionId: null
    },
    // actions,
    // mutations
})

我在 getSectionId 操作中有一个 Web 请求,它异步获取数据并调用将填充 firstSectionIdstate --- 中的突变。在初始渲染期间 firstSectionIdnull 并且我收到警告说在渲染 router-link 期间缺少必需的参数。

在这里添加 v-if="firstSectionId" 不是问题。但总的来说,从服务器获取数据以显示的方法是什么?目前我所有的组件都在渲染之前检查存储中是否存在数据,这是正常的还是有更好的方法在渲染之前等待数据加载?

原文由 Sly 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 425
2 个回答

异步获取数据的一种方法是在 vuex 存储 操作 中使用 Promise。

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

为了证明我向 这条路线 提出请求。您可以看到响应应该是什么样子。让我们将响应对象保存在 state.users 数组中。

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() 方法。那是关键时刻。在此之前,我们 提交了一个 mutation ,这是同步操作,我们确信我们将在 store.state 中有我们的响应,可以在 filterUsers() 方法中使用 (不要忘记传递 self parm)

用户.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)
    }
  }
}

更好的方法(ES6 和 ES7)

ES6 Promises 异步编程

//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 承诺。代码看起来更容易理解(就像它是同步的一样),但是代码对于浏览器来说是不可读的,所以你需要 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())
  }
}

原文由 t_dom93 发布,翻译遵循 CC BY-SA 4.0 许可协议

根据我的经验,如果您使用与预期结果相同类型的空值预设状态(当然,如果您知道会发生什么),则可以跳过一些检查,例如,如果您有一个项目数组,则从 [] 而不是 null 因为它不会破坏 v-for 指令, .length 和类似的数据访问尝试 4594ba9 检查。

但一般来说,添加 v-if 是很正常的事情。 vue-router 文档中有一个关于此的部分,检查属性是否存在正是它所建议的。它提到的另一个可能的解决方案是在 beforeRouteEnter 保护中获取数据,这确保您将始终使用已经可用的数据访问组件。

最终,这两种解决方案都是正确的,它们之间的决定更多的是 UX/UI 问题。

原文由 mzgajner 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏