Question

对于这样的组件

<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请求，它异步提取数据并调用将填充firstSectionId中state的突变。在初始呈现期间，firstSectionId为null，我收到警告：在呈现router-link期间缺少必需参数。

此处添加v-if="firstSectionId"不是问题。但一般来说，从服务器获取数据的方法是什么？目前我的所有组件都在检查呈现前是否存在数据，是否正常或是否有更好的方法等待数据在呈现之前加载？

Answer 1

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

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

证明我向this route提出请求。您可以看到响应应该如何。让我们在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()方法。那是至关重要的时刻。在此之前我们提交突变，这是同步操作，我们确信我们将在store.state中获得可以在filterUsers()方法中使用的响应（don＆＃ 39;忘记通过自我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)       
    }
  }
}

更好的方式（ES6＆amp; ES7）

ES6对异步编程的承诺

//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函数改进异步编程，你可以await承诺。代码看起来更容易理解（就像它是同步的），但代码对于浏览器来说是不可读的，所以你需要使用Babel转换器来运行它。

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

Answer 2

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

但通常情况下，添加v-if是非常正常的事情。有a section about this in the vue-router documentation并检查属性是否存在正是它的建议。它提到的另一个可能的解决方案是在beforeRouteEnter内部获取数据，这可以确保您始终可以使用已有数据的组件。

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

Answer 3

我对地点和谷歌地图api有类似的要求。我需要从API中获取我的位置，将它们加载到列表中，然后使用地图组件中的那些来创建标记。我使用axios在Vuex动作中获取数据，在我的状态下加载了变异，然后使用getter来检索已安装的生命周期钩子中的结果数组。这导致在异步操作解决之前已挂起的空数组。

我使用store.subscribe以这种方式解决它：

<template>
  <div class="google-map" :id="mapName"></div>
</template>

<script>
import GoogleMapsLoader from 'google-maps';
import { mapGetters } from 'vuex';

export default {
  name: 'google-map',
  props: ['name'],
  computed: {
    ...mapGetters({
      locations: 'locations/locations',
    }),
  },
  data() {
    return {
      mapName: `${this.name}-map`,
    };
  },
  mounted() {
    this.$store.subscribe((mutation, state) => {      
      if (mutation.type === 'locations/SAVE_LOCATIONS') {
        GoogleMapsLoader.KEY = 'myKey';
        GoogleMapsLoader.load((google) => {
          /* eslint-disable no-new */
          const map = new google.maps.Map(document.getElementById('locations-map'));

          // loop through locations and add markers to map and set map boundaries
          const bounds = new google.maps.LatLngBounds();

          // I access the resulting locations array via state.module.property
          state.locations.locations.forEach((location) => {
            new google.maps.Marker({
              position: {
                lat: location.latitude,
                lng: location.longitude,
              },
              map,
            });
            bounds.extend({
              lat: location.latitude,
              lng: location.longitude,
            });
          });

          map.fitBounds(bounds);
        });
      }
    });
  },
};

从REST API

3 个答案:

更好的方式（ES6＆amp; ES7）