Question

我的问题是吸气剂正在返回初始状态（[]）。

在我的组件中，我有一个created方法，可将axios调用结果设置为状态。

created() {this.$store.dispatch("SET_STORIES");},

我已计算出mapGetters：

  computed: {
    ...mapGetters(["GET_STORIES"])
  },

还有一种获取状态的方法：

  methods: {
    stories() {
      return this.$store.getters.GET_STORIES;
    }
  }

mounted()返回一个空数组：

  mounted() {
    console.log("stories", this.$store.getters.GET_STORIES);
  },

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";
import chunk from "lodash/chunk";
Vue.use(Vuex, VueAxios, axios);

export default new Vuex.Store({
  state: {
    stories: [],
    twoChunkStories: []
  },
  getters: {
    GET_STORIES: state => {
      return state.stories;
    }
  },
  mutations: {
    SET_STORIES(state, stories) {
      state.stories = stories;
    },
    SET_CHUNKED_STORIES(state, stories) {
      state.twoChunkStories= stories;
    },
  },
  actions: {
    SET_STORIES: async ({ commit }) => {
      const options = {
        headers: {
          "Content-Type": "application/json"
        }
      };
      let { data } = await axios.get(
        "https://api.example.com/get.json",
        options
      );
      if (data.meta.code === 200) {
        let storiesArray = data.data.stories;
        let chunkSize = 2;
        commit("SET_STORIES", storiesArray);
        let chunkedArray = chunk(storiesArray, chunkSize);
        commit("SET_CHUNKED_STORIES", chunkedArray);
      }
    }
  }
});

如何进行axios异步调用，该调用将在最早的生命周期挂钩（我认为created()是最早的挂钩）上将状态设置为onload并准备好在挂载时被调出。显然我在吸气剂上异步地做错了，我只是不知道到底是什么。

Answer 1

您没有在组件中调用 SET_STORIES 的操作方法，因此商店中的故事将不会更新，首先您需要从Vue组件中调用操作，例如

mounted() {
 this.$store.actions.SET_STORIES
}

此外，我认为您需要在此处使用其他逻辑，因为您不知道从服务器中获取故事数据需要花费多长时间。

在您的组件中，您可以创建一个名为 isDataLoaded 的变量，并使其最初为false。在您的组件中，您可以有条件地呈现列表，例如


<div v-if="!isDataLoaded">
  Loading ...
</div>

<div v-if="isDataLoaded">
  ... your list goes here ...
</div>

在您的 mount（）方法中，您需要在执行此类操作之后更新 isDataLoaded ，这样您的列表才会显示在屏幕上

async mounted() {
 await this.$store.actions.SET_STORIES
 this.isDataLoaded = true
}

Vue + Vuex异步使用axios，但getter返回空数组

store.js

1 个答案: