从 REST 获取的 Vuex 渲染数据 API

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 请求，它异步获取数据并调用将在 state 中填充 firstSectionId 的突变。在初始渲染期间 firstSectionId 是 null 并且我收到警告，在 router-link.

的渲染期间缺少必需的参数

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

Answer 1

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

但一般来说，添加 v-if 是一件很正常的事情。有 a section about this in the vue-router documentation 并且检查属性是否存在正是它所建议的。它提到的另一种可能的解决方案是在 beforeRouteEnter 守卫中获取数据，这确保您始终可以使用已经可用的数据访问组件。

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

Answer 2

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

中使用 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()方法中使用(别忘了传递自己的参数)

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 和 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

要摆脱回调地狱，并改进异步编程，请使用 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 3

我对位置和 google 地图 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 获取的 Vuex 渲染数据 API

Vuex rendering data that is fetched from REST API

vue.js

vuex

更好的方法（ES6 和 ES7）