Javascript （Vuejs，Vuetify）如何避免两次加载对象形成API？

我是Vuejs的初学者。我正在创建一个网站，显示从后端加载到前端的内容。因此，我使用Axios通过以下代码连接到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
  }

但问题是，每次我转到另一个页面，再回到这个页面，内容都会再次加载到contentList中，所有内容都会加倍。 有人能解释一下，如何用“好的代码”来写这篇文章，避免重复加载所有内容吗

---

谢谢

在提出请求之前，您可以检查列表中是否已经有内容

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

---

在执行axis调用之前，只需检查内容是否已加载。该操作还用于执行axios调用：

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

---

查看Vuex并将值保存在存储中。加载页面时，检查存储区是否已填充数据，如果未填充，则进行调用。因为在每次装载时，您都在对现有contentList使用push元素，所以简单的解决方案是“清除”“contentList例如，将其设置为空数组或创建新的变量tempList并推入该数组，然后再设置状态。contentList=tempList@TobiasSchäfer请查看您的答案，因为我认为在您的情况下，前端应用程序只会获取一次数据，所以其他用户所做的任何操作都不会被看到？@arkoSelak您是对的，它取决于数据的类型，如果数据正在更改或只需要一次。但是从提供的用例来看，我假设数据只需要一次，而不需要updateOk，谢谢，这很有效！我仍然无法理解vue的逻辑，有时是什么导致了这些原始问题。谢谢