vue-cookies gets the value and returns the object instead of the actual value

Question

I use vue-cookies npm package in my vue project. I have no problem installing the package, initializing it in the project and setting the cookies. However, when I try to retrieve the value stored in the cookie by key, instead of showing my stored value, it shows [object Object] and I'm not sure what's wrong: This is my code:

this.cart.push({
  productID: this.product._id,
  product: {
    productName: this.product.productName,
    thumbnail: this.product.productMedia[0].imagePath,
    option: 'Digital Download'
  },
  unitPrice: this.product.price.listingPrice,
  quantity: 1
})
console.log(this.cart)
this.$cookies.set('cart', this.cart, 60 * 60 * 24)
console.log(this.$cookies.isKey('cart'))
console.log(this.$cookies.get('cart'))

I'm sure this.cart is not empty, $this.$cookies.isKey('cart) returns true, but $cookies The .get() method returns [object Object] instead of my stored cart value. Any help would be greatly appreciated!

Answer 1

If you want to see the value in the console, try the following

console.log(JSON.stringify(this.$cookies.get('cart')))

The object in question may be nested, which is why it won't print.

Answer 2

When setting the JSON object in the cookie. You can set key values ​​as JSON strings instead of JSON objects.

this.$cookies.set('cart', JSON.stringify(this.cart), 60 * 60 * 24)

When obtained, it can be accessed by parsing the JSON string into an object.

JSON.parse(this.$cookies.get('cart'))