避免在State已填充的情况下重新获取内容

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

然后，在获取问题的组件中，检查这一点并在加载后进行更新。