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] || {};
  },
},

在另一种情况下，由于我总是连接用当前状态获取的新项目，我经常看到数据是重复的：

  [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: []
    }
  }
})

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

当State已经填充时，避免重新获取内容

1 个答案: