Vuex восстанавливает импортированные объекты после фильтрации

Question

Я снова борюсь с Vuex и импортированным. js файлом. У меня есть 2 кнопки. Первый включит мой магазин и импортирует шутку. js Файл с шутками и загружает их в состояние: jokes: []. Вторая кнопка удалит первую шутку. Но если я снова нажму первую кнопку, первая шутка НЕ ​​будет загружена снова! Почему ????
Мой магазин:

import jokesImportfrom './jokes'

export default {
  state: {
    jokes: []
  },
  mutations: {
    initJokes (state, payload) {
      state.jokes = payload;
    },
    filterJokes (state, deleteJoke) {
      for (let deletions in deleteJoke) {
        state.jokes.filter(element => {
          if (element.id === deleteJoke[deletions]) {
            state.jokes.splice(
              state.jokes.indexOf(element),
              1
            );
          }
        });
      }
    }
  },
  actions: {
    initStore ({ commit }) {
      commit('initJokes', jokesImport);

    },

    storeAnswer: ({ commit }, answer) => {
      commit("filterJokes", answer);
    },
  }

Что-то не так с моим фильтром? На кнопках есть оба метода:

getJokes() {
  this.$store.dispatch('initStore')
},
checkAnswer(answer){
  this.$store.dispatch("storeAnswer", {
    removeJoke: 1                        //This will remove the Joke with id: 1
  });
}

И джайки. js выглядят так:

export default [
    {
        "id": 1,
        "question": "Did you hear about the restaurant on the moon?",
        "answer": "Great food, no atmosphere.",
        "votes": 0
    },
    {
        "id": 2,
        "question": "What do you call a fake noodle",
        "answer": "An Impasta.",
        "votes": 0
    },

Answer 1

Вам придется сделать глубокую копию jokesImport, когда вы звоните initStore.

Если вы этого не сделаете, то при изменении jokes это также повлияет на jokesImport.

Измените initStore действие следующим образом:

initStore({ commit }) {
    let init = JSON.parse(JSON.stringify(jokesImport)); //making deep copy.
    commit("initJokes", init);
  },