CODEWITHSUNDEEP
vue.jsvuejs2vuex
Sander Plomp
Sander Plomp

Reputation: 261

How can I update the list after I've added an item using Vuex

I am fairly new to Vuex and trying to implement it later in my real project. For this I have setup a simple application where you can add items to the cart. Everything works so far, but the component doesn't update its data after an item has been added.

This is my current code, here is the component Home.vue:

<template>
  <div class="home">
    <div v-for="product in cart" :key="product.name">
      {{product.name}}
    </div>
    <div v-for="product in products" :key="product.name">
        {{product.name}}
        <button @click="addToCart(product)">Add to cart</button>
    </div>
  </div>
</template>

<script>
export default {
  /* eslint-disable */
  name: 'Home',
  data () {
    return {
      products: [
        {
          name: 'Appeltaart',
          price: '20.00'
        },
        {
          name: 'Chocoladetaart',
          price: '15.40'
        }
      ],
    }
  },
  computed: {
    cart() {
      return localStorage.getItem('cart')
    }
  },
  beforeMount() {
    console.log(localStorage.getItem('cart'))
  },
  methods: {
    addToCart(product) {
      this.$store.commit('addToCart', product)

      console.log(this.$store.state.cart)
    },
  }
}
</script>

And here is the Vuex file, index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  /* eslint-disable */
  state: {
    cart: [],
    newCartItem: {
      name: '',
      price: 0,
      quantity: 0,
    },
  },
  mutations: {
    addToCart (state, product) {
      state.newCartItem.name = product.name
      state.newCartItem.price = product.price
      state.newCartItem.quantity = 1
      state.cart.push(state.newCartItem)
      localStorage.setItem('cart', JSON.stringify(this.state.cart))
      state.newCartItem = {}
    }
  },
  actions: {
  },
  modules: {
  }
})

As you can see, I am currently making use of computed data, but obviously it's not working. How do I make this work?

Thanks in advance!

Upvotes: 0

Views: 544

Answers (1)

Tom Truyen
Tom Truyen

Reputation: 363

I'm pretty sure that it is because you are trying to get your items out of the 'localStorage'. Why don't you just make a getters in your state and get the cart from there?

Example:

Your computed can be replaced by this:

computed: {
    cart() {
      return this.$store.getters.getCart;
    }
  },

Your Vuex index.js will look like this (only change is the 'getters' part)

export default new Vuex.Store({
  /* eslint-disable */
  state: {
    cart: [],
    newCartItem: {
      name: '',
      price: 0,
      quantity: 0,
    },
  },
getters: {
    getCart(state) { 
        return state.cart;
    }
}
  mutations: {
    addToCart (state, product) {
      state.newCartItem.name = product.name
      state.newCartItem.price = product.price
      state.newCartItem.quantity = 1
      state.cart.push(state.newCartItem)
      localStorage.setItem('cart', JSON.stringify(this.state.cart))
      state.newCartItem = {}
    }
  },
  actions: {
  },
  modules: {
  }
})

Now I guess you are using LocalStorage for some form of persistence in your Vuex store, but I'd recommend using: https://www.npmjs.com/package/vuex-persistedstate for that. This way you are able to backup your Vuex in your localstorage (so it will still be accessible after refreshes etc...) but you'll still be able to use the technique that I've used to get your data

Upvotes: 1

Related Questions