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

Having trouble setting a value for a textbox in angularjs

Executing AJAX calls within a forEach loop

What is the best method to utilize a promise to delay the execution of a function until the data is received and stored

Cheerio in node.js encounters a problem while reading HTML files

Having trouble with the pagination feature while filtering the list on the vue-paginate node

Utilizing AngularJs to connect server-generated HTML content to an iframe

Ensure the date is displayed in the format of dd-mm-yyyy when using the input type=date

A step-by-step guide on sending a fetch request to TinyURL

Using window.location.replace() for redirection after AJAX call succeeds

Exploring the art of path zooming in d3.js

Struggling to use the innerHTML method to update a div within another div element?

Ways to eliminate the blue selection box when dragging canvas objects in fabric framework

Sending JSON data back to the server using KeyValuePair in C#

What is the best way to extract data from the ajax.done() function?

What is the reason for npm and yarn to download multiple versions of jquery?

How to transfer data using props through the ":to" attribute of a router link in Vue.js

What methods are available to verify all my (JavaScript) AJAX calls when they are being sent to Node.js?

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

In React (Next.js), the act of replacing a file is performed instead of adding a file

Is Implementing a Promise for Preprocessing in NodeJS Worth It?