Vue.js - Add or set new data to object in store

Related searches

I'm trying to add or update an object to store with 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)
    }
  }
})

This returns state.userData.push is not a function.

And in the components:

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

Later on I want to update userData with a value from other component, so that it impacts both components. I would like to have a nice way of adding, replacing, concating the old array with a new array. I followed the example in this video.

(FYI: I'm currently learning Vue.js from scratch and couldn't figure out this Vuex's mutations, actions...)

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

You are trying to use a push method of Object. Object does not have a push method you should initiate userData value with Array [] or assign that data to the object

Reactivity in Depth — Vue.js, The difference between $add and $set is that $add will change a data-bound Array directly by setting indices� A "store" is basically a container that holds your application state. There are two things that make a Vuex store different from a plain global object: Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. You cannot directly mutate the store's state.

I've ended up using Object.assign method.

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

Adding Instance Properties — Vue.js, Vue.js and Vuex - best practices for managing your state - vue.md. Store({ state : { user: { id: 1 } }, getters: { getUserId: state => state.user.id, bigger over time and your state becomes more complex, try to use modules for better data encapsulation. If you have to add a new object to an existing array, always define all� Prefer initializing your store's initial state with all desired fields upfront. When adding new properties to an Object, you should either: Use Vue.set (obj, 'newProp', 123), or Replace that Object with a fresh one.

if you need reactivity:

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

Tips & Best Practices, var vmA = new Vue({ data: { privateState: {}, sharedState: store.state } }) var vmB = new Vue({ data: { privateState: {}, sharedState: store.state } }) It’s important to note that you should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations

How to add a new property to vue (object) data? � Issue #3340 , When the values of those properties change, the view will “react”, updating to match the new values. // Our data object var data = { a: 1} // The object is added to a Vue instance var vm = new Vue({ data: data }) // Getting the property on the instance // returns the one from the original data vm.a == data.a // => true // Setting the property on the instance // also affects the original data vm.a = 2 data.a // => 2 // and vice-versa data.a = 3 vm.a // => 3

Vue.js and Vuex, var vm = new Vue({ data: { a: 1} }) // `vm.a` is now reactive vm.b = 2 // `vm.b` is NOT reactive. Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, propertyName, value) method:

Let’s see how everything works by building a sample application next. Setting Up A Vue.js 2 Project And Installing Vuex. The easiest way to set up a new Vue.js 2 project is to use Vue CLI.

Comments
  • userData should be an array and it would be declared as : state: { userData: [] },
  • @BoussadjraBrahim Reason I'm using an object is with an array I can push a multiple array to a userData but with an object you can't. If I change userData.push to Vue.set then it works but later on I can't add or replace an value.
  • your userData contain the data of one user?
  • @BoussadjraBrahim Yes.
  • so you could do it simply like : state.userData=data
  • But with Array I can push multiple arrays to it. I'm simply trying to store an Object in state.