Vue объект mapState изменяет состояние vuex

Question

У меня очень странная проблема, потому что эта проблема не появляется в Quasar при разработке электронного приложения. Но этот с vue -cli разочаровывает.

Так что у меня есть состояние vuex, где у меня есть мои тестовые данные

export default function() {
  return {
    profile: {
      avatar: null,
      name: 'Thomas Smith',
      contact: 'thomas.smith@bootiq.io',
      branch: 'BIQ-PRAGUE',
      position: 'Software Developer / UI Designer',
      projects: [
        {
          company: 'Company',
          project: 'E-Shop Platform',
          role: 'Frontend Developer, Consultant'
        },
        {
          company: 'BIQ-INTERNAL',
          project: 'Skillboard',
          role: 'UI Design, Project Lead'
        }
      ],
      interests: ['Frontend Applications', 'UI Design', 'Stalking random people'],
      skills: [
        {
          name: 'Javascript',
          level: 2
        },
        {
          name: 'Vue',
          level: 3
        },
        {
          name: 'Angular',
          level: 1
        }
      ]
    }
  }
}

теперь у меня есть компонент для редактирования данных профиля

computed: {
    ...mapState({
      stateSkillList: state => state.skill.skillList
    }),

    ...mapGetters({
      user: 'user/getUser'
    })
  },

  mounted() {
    if (this.user) {
      this.data = Object.assign({}, this.data, this.user)

      if (this.data.projects.length === 0) {
        this.data.projects = [this.baseItems.projects]
      }

      if (this.data.skills.length) {
        this.filterSkillList()
      }
    }
  },

теперь моя проблема. У меня есть входы, где v-модель это data.name, data.contact et c и все работает нормально. Но когда я пытался добавить / удалить навык из массива data.skill или из data.projects, data.interests, я получил

vue.esm.js?a026:628 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>)
warn @ vue.esm.js?a026:628
logError @ vue.esm.js?a026:1893
globalHandleError @ vue.esm.js?a026:1888
handleError @ vue.esm.js?a026:1848
run @ vue.esm.js?a026:4579
update @ vue.esm.js?a026:4551
notify @ vue.esm.js?a026:739
mutator @ vue.esm.js?a026:891
handleRemoveSkill @ EditProfile.vue?05c4:306
click @ EditProfile.vue?0ae8:411
invokeWithErrorHandling @ vue.esm.js?a026:1863
invoker @ vue.esm.js?a026:2188
original._wrapper @ vue.esm.js?a026:7565
vue.esm.js?a026:1897 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:90)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:814)
    at Watcher.run (vue.esm.js?a026:4577)
    at Watcher.update (vue.esm.js?a026:4551)
    at Dep.notify (vue.esm.js?a026:739)
    at Array.mutator (vue.esm.js?a026:891)
    at VueComponent.handleRemoveSkill (EditProfile.vue?05c4:306)
    at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6bb1df4e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/EditProfile.vue?vue&type=template&id=7b259475&scoped=true& (app.js:1178), <anonymous>:414:44)
    at invokeWithErrorHandling (vue.esm.js?a026:1863)
    at HTMLButtonElement.invoker (vue.esm.js?a026:2188)

, и я понятия не имел, почему. Вот простая функция

handleAddSkill(name) {
  this.data.skills.push({ name })
  this.dataSkillFilteredList = this.dataSkillFilteredList.filter(item => item !== name)
  this.dataSkillList = this.dataSkillFilteredList
},

Спасибо за ваши идеи

Answer 1

Вы скопировали состояние и пытаетесь изменить эту копию. Вот почему Vuex предупреждает вас. Таким образом, компоненты, зависящие от этого конкретного состояния vuex, не будут получать новые данные, которые вы обновили, потому что вы изменяете за пределами хранилища vuex и редактируете его копию. Если вы действительно хотите изменить состояние, вы должны сделать это внутри хранилища vuex с его функциями мутации , которые действительно обновят исходное состояние. Vuex даже позволяет вам напрямую обновлять состояние vuex без функций мутации (например, установка вычисляемого свойства vuex в v-model). Потому что это также обновляет исходное состояние (однако неправильно). Но то, как вы делаете, никак не влияет на оригинальный магазин vuex , и vuex, похоже, не нравится. Итак, решение состоит в том, чтобы использовать функции мутации , но если ваши данные слишком велики для обработки, вы можете просто изменить вычисляемое свойство напрямую с помощью getters и setters (Черт, вам даже не нужно использовать геттеры и сеттеры ). Первый способ предпочтительный .