避免当国家已经填充内容重新取

Question

我有以下Vue的组件结构：

Wrapper 
-- QuestionsList 
---- Question 
-- QuestionDetail 

与以下路线：

/ (goes to Questionslist) 
/:id (goes to QuestionDetail) 

当用户访问/，HTTP GET请求（通过Vuex）完成，内容被填充到一个对象数组中。然后，如果他点击“显示更多”链接，他会看到QuestionDetail页面（但不必重新获取内容 - 直接从State获取）

我的问题是每次我们“路由”中一个页面，我们不知道我们的商店的状态。

例如，当用户导航（深联）到/:id，我们需要看到如果填充了国家，因此避免了新的HTTP GET：

created() { 
    if (!this.$store.state.questions.length) { 
    this.$store.dispatch('requestItems'); 
    } 
}, 
computed: { 
    question() { 
    return this.$store.state.questions[this.$route.params.id] || {}; 
    }, 
}, 

在不同的情况下，因为我总是CONCAT新项目与当前状态牵强，我经常看到的数据是重复的：

[types.FETCHED_ADS_SUCCESS](state, payload) { 
    state.items = [...state.items, ...payload]; // when I go back in history, a new action is initiated and concats a copy of the same data 
    }, 

Answer 1

什么是你的存储体系结构？我发现在商店中保留一个布尔指示符来指示内容是否被加载是有用的。

const store = new Vuex.store({ 
    state: { 
    questions: { 
     isLoaded: false, 
     items: [] 
    } 
    } 
}) 

然后在提取问题的组件中检查此问题并在加载后更新。