Encountering issues with properly updating the Vuex store

Question

Encountering issues with properly updating the Vuex store

Looking at my Vuex 2 store:

const datastore = new Vuex.Store({
  state: {          
    socketcluster: {
      connection: false,
      channels: []
    },
    selected_offers: []
  },
  mutations: {
    addOffer: function(offer) {
      datastore.state.selected_offers.push(offer) // facing an issue here - cannot directly access state.offers as it throws an undefined
    }
  },
  getters: {
    getOffers: function(){
      return datastore.state.selected_offers; 
    }
  }
});

In a Vue 2 component, I have the following code snippet:

  methods: {
    clicked: function(){
      console.log("Toggle Offer");
      if ( datastore.getters.getOffers.filter(function(o){ o.id == this.offer.id } ).length == 0 ) {
        // add it
        datastore.commit('addOffer', this.offer)
      } else {
        // TODO remove it
      }
    }
}

Upon triggering the method, the store changes are visible in this image: https://i.stack.imgur.com/knlHP.png

I'm encountering some issues with this approach. What could be the problem here?

javascript vue.js vuejs2 vuex

Answer 1

Answer №1

When working with the vuex pattern, it's important to utilize actions instead of directly mutating the state from the component. This example demonstrates a simple way to implement Vuex in a Vue application. By using getters and mutations, you can manage the state of your application effectively.

const store = new Vuex.Store({
  state: {          
    socketcluster: {
      connection: false,
      channels: []
    },
    selected_offers: [ "offer1", "offer2"]
  },
  mutations: {
    addOffer: function( state, offer ) {
      state.selected_offers.push(offer);
    }
  },
  getters: {
    getOffers: function( state ){
      return state.selected_offers; 
    }
  }
});

new Vue({ 
    store,
    data: function() {
        return {
            offer: "offer3"
        }
    },
    methods: {
        clicked: function() {
            if ( this.offers.length === 2 ) {
                this.$store.commit('addOffer', this.offer)
            } else {
                // TODO remove it
            }
        }
    },
    computed: {
        offers: function() {
            return this.$store.getters.getOffers;
        }
    }
}).$mount( "#app" );

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>

<div id="app">
    <div v-for="offer in offers" > {{offer}}</div>
    <button @click="clicked"> clicked </button>
</div>

Answer 2

When working with the vuex pattern, it's important to utilize actions instead of directly mutating the state from the component. This example demonstrates a simple way to implement Vuex in a Vue application. By using getters and mutations, you can manage the state of your application effectively.

const store = new Vuex.Store({
  state: {          
    socketcluster: {
      connection: false,
      channels: []
    },
    selected_offers: [ "offer1", "offer2"]
  },
  mutations: {
    addOffer: function( state, offer ) {
      state.selected_offers.push(offer);
    }
  },
  getters: {
    getOffers: function( state ){
      return state.selected_offers; 
    }
  }
});

new Vue({ 
    store,
    data: function() {
        return {
            offer: "offer3"
        }
    },
    methods: {
        clicked: function() {
            if ( this.offers.length === 2 ) {
                this.$store.commit('addOffer', this.offer)
            } else {
                // TODO remove it
            }
        }
    },
    computed: {
        offers: function() {
            return this.$store.getters.getOffers;
        }
    }
}).$mount( "#app" );

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>

<div id="app">
    <div v-for="offer in offers" > {{offer}}</div>
    <button @click="clicked"> clicked </button>
</div>

Answer 3

Answer №2

When working with mutations, it is important to remember that the first parameter passed is always the state object. This means that you are adding the entire state object to the selected_offers array.

Your mutation function should be structured like this:

mutations: {
  addOffer: function(state, offer) {
    state.selected_offers.push(offer)
  }
},

If you need further information on vuex mutations, you can refer to the official documentation.

Answer 4

When working with mutations, it is important to remember that the first parameter passed is always the state object. This means that you are adding the entire state object to the selected_offers array.

Your mutation function should be structured like this:

mutations: {
  addOffer: function(state, offer) {
    state.selected_offers.push(offer)
  }
},

If you need further information on vuex mutations, you can refer to the official documentation.

Encountering issues with properly updating the Vuex store

Answer №1

Answer №2

Similar questions

Text centered vertically with jQuery is only loaded after the page is resized

How can I format the input type number with a thousand separator as 123.456.789?

Dividing image styles within css

Displaying Highcharts inside an infowindow by sending an AJAX request through Google Maps

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

individualized django models field for each user

Error: Unable to resolve Vue dependencies

How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

Methods for presenting text from an object array using Angular

Styling a textbox within a gridview using JavaScript

Creating PDF documentation in a JavaScript architecture MVC framework, specifically utilizing Backbone.js

What are the steps to make a div with no content inside?

Library written in JavaScript for extracting CSS that is relevant

Displaying the unique values based on the key attribute

Tips for aligning pagination in the MUI v5 table component and creating a fixed column

Having trouble retrieving the keyword property within a Vue.js promise

Challenges encountered while formatting Json strings for WCF service transmission

Create your own unique Semantic UI themes using the Semantic UI theme builder, complete with support for Font Awesome classnames and the ability to preview them with the

Having difficulty showcasing API call results in a Vue.js component

Having difficulty positioning two elements within a button using bootstrap