Магазин Vuex не может обновить данные компонента

Question

Я пытаюсь создать клон HN в 2 панелях, но по какой-то причине мое хранилище vuex не может обновить данные компонента.

Это ссылка на проект, поскольку в нем слишком много файлов.https://github.com/karansinghgit/hn-vue

Вот как это выглядит.Моя цель - щелкнуть одну из статей слева и отобразить статью hn с комментариями справа.До сих пор я понял, что мне нужно использовать vuex для обмена данными, но обмен не происходит.

Он просто отображает сигнатуру функции, когда я хочу, чтобы она отображала идентификатор статьи.

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>