vue.js - 在计算中返回一个 getter 创建一个循环

Question

我在计算内部调用存储中的一个 Action 来运行它，在我返回一个 getter 之后，这将创建一个循环。

HTML

{{loadedProjects}}

计算

computed: {
    loadedProjects() {
      this.$store.dispatch("getProjects");
      return this.$store.getters.loadedProjects;
    }
  }

商店

import Vuex from "vuex";
import axios from "axios";

const createStore = () => {
    return new Vuex.Store({
        state: {

            loadedProjects: []
        },
        mutations: {
            setProjects(state, projects) {
                state.loadedProjects = projects
            }

        },
        actions: {
            getProjects(vuexContext) {
                console.log("hello1")
                return axios.get("THE API URL")
                    .then(res => {
                        console.log("hello2")
                        vuexContext.commit("setProjects", res.data);
                    })
                    .catch(e => console.log(e));
            }

        },
        getters: {
              loadedProjects(state) {
                return state.loadedProjects;
              }
        }
    });
};

export default createStore;

我希望调用我的操作来填充我的状态，然后返回我的状态以呈现我的数据。

Answer 1

使用在计算属性内进行 API 调用的存储操作有什么意义……也许您想触发 loadedProjects 更改？ ....计算的属性不是异步的，所以无论哪种方式，返回行都会在您获得响应之前执行...您可以尝试 vue-async-computed插件或者像你所做的那样使用 created 钩子(Hook)上的调用，这是更好的方法，你不必使用计算属性，你可以只使用 {{ $store.getters。 loadedProjects }} 在你的模板上