(Vuejs, Vuetify) How to avoid, loading objects twice form an API?

Question

Im kind of an Beginner within Vuejs. Im Creating a Site which shows content that is loaded from the Backend into the Frontend. Therfore, I use Axios to connect to the API with this code:

    contentList: [],
};
const mutations = {
    setContent (state) {

            axios
            .get("http://backendapi/content")
            .then(res => {
              const data = res.data;
              for (let key in data) {
                const object = data[key];
                state.contentList.push(object)
              }
            });
    }
};
const actions = {
    initContent: ({commit}) =>{
        commit('setContent');
    }
};

and on my Page i load the Contentlist when mounted:

mounted() {
    this.$store.dispatch('initContent');
    this.content = this.$store.getters.contentList
  }

But the Problem is, every Time i go to another Page and back to this Page, the Content is loaded again into the contentList and everithing ist doubled. Can someone explain, how to write this in "good Code" and avoiding loading everything double?

Thank you

Look at Vuex vuex.vuejs.org/guide and save the values in store. When the page is loaded, check if store if populated with data, if not make your call. — Tobias Schäfer
– Tobias Schäfer, Commented Jan 9, 2020 at 12:28
Because you are using push elements to existing contentList on each mount, easy solution would be to ''clear" contentList eg. set it to empty array or create new variable tempList and push in that array and later just set state.contentList = tempList @TobiasSchäfer please review your answer, because I think in your case frontend app will get data only once so any action made by other users will not be visible? — Žarko Selak
– Žarko Selak, Commented Jan 9, 2020 at 12:38
@ŽarkoSelak you're right, it depends on the type of data, if its changing or only once needed. But from the use case provided I assumed that the data is only required once without update — Tobias Schäfer
– Tobias Schäfer, Commented Jan 9, 2020 at 12:40

ihsanser · Accepted Answer · 2020-01-09 12:33:30Z

1

You can check if already have the content on your list before making the request.

setContent (state) {
    if (state.contentList.length == 0){
        axios
        .get("http://backendapi/content")
        .then(res => {
          const data = res.data;
          for (let key in data) {
            const object = data[key];
            state.contentList.push(object)
          }
        });
    }
}

or if you want to update each time just make sure the variable is reset each time.

        axios
        .get("http://backendapi/content")
        .then(res => {
          const data = res.data;
          let contentList = [];
          for (let key in data) {
            const object = data[key];
            contentList.push(object);
          }
          state.contentList = contentList;
        });

answered Jan 9, 2020 at 12:33

ihsanser

1761 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Petziferum Over a year ago

Ok thanks that worked! I still have problems figuring out the logic of vue, what sometimes causes this primitive problems. Thanks

dreijntjens · Accepted Answer · 2020-01-09 12:34:44Z

0

Just check whether the content is already loaded before doing an axis call. Also the action is meant to execute the axios call:

const mutations = {
    setContent (state, data) {
       state.contentList = data 
    }
};
const actions = {
    async initContent: ({commit, state}) =>{
        if (state.contentList.length === 0) {
          try {
            let result = []
            let response = await axios.get("http://backendapi/content")
            for (let key in response.data) {
               result.push(response.data[key])
            }
            commit('setContent', result);
          } catch (error) {
             // something went wrong
          }
        }
    }
};

answered Jan 9, 2020 at 12:34

dreijntjens

4,84528 silver badges30 bronze badges

Collectives™ on Stack Overflow

(Vuejs, Vuetify) How to avoid, loading objects twice form an API?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related