Vuex存储无法更新组件数据

Question

我正在尝试在2个窗格中创建HN克隆，但是由于某些原因，我的vuex存储无法更新组件数据。

这是项目链接，因为涉及的文件太多。 https://github.com/karansinghgit/hn-vue

这是它的外观。我的目的是单击左侧的文章之一，并在右侧显示hn文章及其注释。 到目前为止，我已经了解到我需要使用vuex共享数据，但是共享并未发生。

当我希望它显示商品ID时，它只是显示一个函数签名。

Answer 1

问题出在您的 store.js 文件中。您正在将 currentStory 的默认状态设置为Number。将其设置为实际数字应该可以解决您的问题：

export const store = new Vuex.Store({
  state: {
    currentStory: 0
  },
  mutations: {
    setCurrentStory(state, ID) {
      state.currentStory = ID
    }
  },
  getters: {
    currentStory: state => state.currentStory
  }
})

此外，在 story.vue 中，不必在数据中指定 storyID ，因为您已经将其作为计算属性（可能会引发错误重复的密钥）

Answer 2

您的故事组件（story.vue）具有重复的数据和计算的属性storyID。从数据哈希中删除它。

<template>
    <div id="story">
        {{storyID}}
    </div>
</template>

<script>
export default {
    name: 'story',
    data: function(){
        return {
            story: Object,
            // Remove this --> storyID: this.$store.getters.currentStory
        }
    },
    computed: {
        storyID() {
            return this.$store.getters.currentStory
        }
    }
}
</script>