(Vuejs, Vuetify) Как избежать загрузки объектов дважды с помощью API? - PullRequest
Новая
       5

(Vuejs, Vuetify) Как избежать загрузки объектов дважды с помощью API?

2 голосов
/ 09 января 2020

Я начинающий в Vuejs. Я создаю сайт, который показывает контент, который загружается из бэкэнда в веб-интерфейс. Поэтому я использую Ax ios для подключения к API с этим кодом: 

    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');
    }
};

и на своей странице я загружаю список содержимого при подключении: 

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

Но проблема в том, что каждый раз, когда я go перехожу на другую страницу и возвращаюсь на эту страницу, содержимое снова загружается в contentList, и все время удваивается. Может кто-нибудь объяснить, как написать это в «хорошем коде» и избежать загрузки всего дважды?

Спасибо

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Просто проверьте, загружен ли контент, прежде чем выполнять вызов по оси. Также действие предназначено для выполнения вызова топора ios: 

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
          }
        }
    }
};
0 голосов
/ 09 января 2020

Вы можете проверить, есть ли уже содержимое в вашем списке, прежде чем делать запрос. 

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)
          }
        });
    }
}

или если вы хотите обновлять каждый раз, просто убедитесь, что переменная сбрасывается каждый раз. 

        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;
        });
...