Question

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

在我的页面上，我在安装时会加载Contentlist：

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

但是问题是，每当我转到另一个页面并返回此页面时，内容就会再次加载到contentList中，并且ist翻倍。有人可以解释一下，如何用“好的代码”编写代码并避免将所有内容都加倍加载吗？

谢谢

Answer 1

您可以在发出请求之前检查列表中是否已包含内容。

var input = "somekey:value1 value2 another:<value3 one_more:value4..value5";
var matches = Regex.Matches(input, @"([^\s:]+):(.*?)(?=\s+[^\s:]+:|$)");

var pairs = matches.Select(m => (m.Groups[1].Value, m.Groups[2].Value));
foreach (var (key, value) in pairs)
{
    Console.WriteLine($"<\"{key}\": \"{value}\">");
}

或者如果您想每次更新，只需确保每次都重置变量。

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

Answer 2

只需在执行轴调用之前检查内容是否已经加载。此外，该操作还用于执行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
          }
        }
    }
};

（Vuejs，Vuetify）如何避免通过API两次加载对象？

2 个答案: