Returning a getters in a computed create a loop

Question

I am calling inside the computed an action from the store to run it and after I am returning a getter, this will create a loop.

The HTML

{{loadedProjects}}

The computed

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

The store

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;

I expect to call my action to populate my state and after to return my state to render my data.

Answer 1

What is the point of using the store action that makes an API call inside the computed property ... maybe you want to trigger loadedProjects change ? ....computed property is not asynchronous so either way the return line will be executed before the you get the response... you might try vue-async-computed plugin OR just use the call on the created hook like you have done which is the better way and you don't have to use a computed property you can just {{ $store.getters.loadedProjects }} on your template