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

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)
    }
  }
})

您正在尝试使用pushObject 的方法。对象没有推送方法，您应该userData使用数组初始化值[]或将该数据分配给对象