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，以使其影响这两个组件。我想有一个很好的方法，用新数组添加，替换，隐藏旧数组。我遵循了this video中的示例。

（仅供参考：我目前正在从头开始学习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)
    }
  }
})

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

Answer 2

我最终使用了Object.assign方法。

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

Answer 3

如果需要反应性：

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

Answer 4

试试

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.date1 = data.date1
      state.userData.date2 = data.date2
    }
  }
})

Vue.js-向商店中的对象添加或设置新数据

4 个答案: