Как изменить только свойство вложенного массива в хранилище с помощью vuex

Question

Привет, я новичок в vue и vuex.

Я разместил некоторые данные в хранилище, и мне нужно изменить свойство вложенного массива в зависимости от выбора пользователя.Я пытаюсь использовать «действия» в своем магазине, но когда я использую «this. $ Store.dispatch», я получаю «Uncaught TypeError: state.storyInfo.push не является функцией».если я использую «this. $ store.commit» для прямой фиксации «мутаций», я получаю исходное состояние без изменений.

Это данные в моем состоянии:

{
  "id": 1,
  "title": "Story title",
  "episodes": [
    {
      "id": 1,
      "title": "Episode 1"
    },
    {
      "id": 2,
      "title": "Episode 2"
    },
    {
      "id": 3,
      "title": "Episode 3"
    }
  ]
}

Если, например, пользователь выбирает эпизод с id = 2, я бы хотел, чтобы состояние стало таким:

{
  "id": 1,
  "title": "Story title",
  "episodes": [
    {
      "id": 2,
      "title": "Episode 2"
    }
  ]
}

мой store.js выглядит следующим образом:

export const store = new Vuex.Store({
  state: {
    storyInfo: null
  },
  mutations: {
    setStory (state, payload) {
      state.storyInfo = payload
    },
    addInfoToStory (state, payload) {
      const data = this.state.episodes
      state.storyInfo.push(data)
    }
  },
  actions: {
    addToStory (infoToAdd, payload) {
      infoToAdd.commit('addInfoToStory', payload)
    }
  },
  getters: {
    selectedStoryInfo: state => state.storyInfo
  }
})

Методы вкомпонент выглядит следующим образом:

methods: {
  addSelectedEpisode () {
    this.$store.commit('addToStory', this.episode) // <- here if I use dispatch I get the error and no result
  },
  redirectTo () {
    this.$router.push({name: 'Read'})
  }
}

Я также пытался адаптировать некоторые примеры TODO, найденные в Интернете, но ничего, что я делаю, похоже, не работает.

Что я делаю неправильно?

Answer 1

Размещение собственного решения.В Магазине замените мутацию addInfoToStory на путь истории того, что нужно изменить:

addInfoToStory (state, payload) {
  state.storyInfo.episodes = payload
}

это изменит только это свойство в состоянии.

Answer 2

На store.js вы инициализируете storeInfo как null.

push - это метод, который работает только для массивов, поэтому он не будет работать с переменной null.

Попробуйте вместо этого установить storeInfo как пустой массив:

export const store = new Vuex.Store({
  state: {
    storyInfo: []
  },

  ...