Vue.js - Добавить или установить новые данные для объекта в магазине

Question

Я пытаюсь добавить или обновить объект для хранения с помощью Vuex.

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userData: {}
  },
  mutations: {
    ADD_USER_DATA: (state, data) => {
      state.userData.push(data)
    }
  }
})

Это возвращает state.userData.push не функция.

И в компонентах:

<template>
  <div>
    <input type="date" v-model="inputData.date1">
    <input type="date" v-model="inputData.date2">
    <input type="number" v-model="inputData.date3">
    <button @click="submitForm">Submit</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      inputData: {}
    }
  },

  computed: {
    ...mapState([
      'userData'
    ])
  },

  methods: {
    ...mapMutations([
      'ADD_USER_DATA'
    ]),
    submitForm () {
      this.ADD_USER_DATA(this.inputData)
    }
  }
}
</script>

Позже я хочу обновить userData значением из другого компонента, чтобы оно влияло на оба компонента.Я хотел бы иметь хороший способ добавления, замены, объединения старого массива с новым массивом.Я следовал примеру в этом видео .

(к вашему сведению: я сейчас изучаю Vue.js с нуля и не могу понять мутации, действия Vuex, действия ...)

Answer 1

В итоге я использовал Object.assign метод.

  mutations: {
    ADD_USER_DATA: (state, data) => {
      // state.userData.assign(data)
      state.userData = Object.assign({}, data)
    }
  }

Answer 2

, если вам нужна реактивность:

mutations: {
  ADD_USER_DATA: (state, data) => {
    Object.keys(data).forEach( key => {
      Vue.set(state.userData, key, data[key])
    })
  }

Answer 3

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // userData: {}
    userData: []
  },
  mutations: {
    ADD_USER_DATA: (state, data) => {
      state.userData.push(data)
    }
  }
})

Вы пытаетесь использовать метод push объекта.У объекта нет метода push, вы должны инициировать значение userData с помощью массива [] или назначить эти данные объекту