How to get localstorage data inside vuex state with Nuxt.js

Question

I'm building a shopping cart with Nuxt. but when i refresh the page the basket automatically empties.

I try librairies like vuex-persist , vuex-persistedstate ... but I did not have a solution.

Now Im looking a way to get the initial state of cart directly from local storage like this.

state: {
      cart: [] //here what i want => window.localStorage.getItem("cart")
    }

Thanks a lots.

Aldarund · Accepted Answer · 2019-01-17 11:45:17Z

12

You can access localStorage only in browser. Its not accessible during SSR. So you need to create create a mutation in vuex store that will do what u want and commit it in mounted hook ( mounted executed only in browser ).

E.g.

...
mounted() {
 this.$store.commit('myMutation', window.localStorage.getItem("cart")
}

answered Jan 17, 2019 at 11:45

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Birante Over a year ago

Thanks @Aldarund i will do that.

Nelson La Rocca · Accepted Answer · 2021-03-21 12:33:23Z

1

use nuxt-vuex-localstorage it works great and syncs with vuex

answered Mar 21, 2021 at 12:33

Nelson La Rocca

1931 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to get localstorage data inside vuex state with Nuxt.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related