мутация во vuex

Question

я в vue компоненте получаю массив из this.$store.getters.getList и присваиваю его значения локальной переменной list затем циклом v-for вывожу импуты со значениями v-model взятые из sotre, но когда я ввожу данные в input они записываются в sotre, почему так происходит ?

Мне необходимо менять значения в store только после нажатия button.push как мне этого добиться?

vue component:

<template>
  <div id="app">
    <form class="fomr__group">
      <input v-for="(item, index) in list" :key="index" type="text" class="input" v-model="item.name">
      <button class="push">push</button>
    </form>
    <hr>
    <pre>{{ store }}</pre>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      list: null
    }
  },
  methods: {
    init () {
      this.list = this.$store.getters.getList
    }
  },
  computed: {
    store () {
      return this.$store.getters.getList
    }
  },
  created () {
    this.init()
  }
}
</script>

store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list: [
      {
        name: 'text - 1'
      },
      {
        name: 'text - 2'
      },
      {
        name: 'text - 3'
      }
    ]
  },
  mutations: {},
  actions: {},
  getters: {
    getList: state => state.list
  }
})

Answer 1

Все дело в том, что Vue является реактивным фреймворком, и он следит за изменениями в html и на лету переносит их в store, а так же делает все вычисления связанные с этой переменной. Если Вам не нужно делать изменения в сторе, а просто отобразить их - Вам нужно скопировать их из Vuex с помощью spred оператора. Ваша init функция должна выглядеть следующим образом:

init () {
    this.list = [...this.$store.getters.getList];
}

Если нужно сохранить изменения в store по нажатию кнопки, Ваша store функция должна выглядеть так:

store () {
   return this.$store.state.list = [...this.list];
}

БЛОГ НА HUSL

мутация во vuex

Ответы (1 шт):