-3

I am trying to develop a shopping cart with nuxt js. I am successfully storing the cart data in local storage but I am unable to retrieve the data.state.js file mutations.js file

N.B: i don't wanna use vuex-persistedstate.

Rifat
  • 27
  • 1
  • 4
  • What's the exact problem? An error, no data being returned, a different response than expected? – Jordan Apr 07 '21 at 09:58
  • Have a look at the first file I checked if data is available from local storage then show that data. If not then show an empty array. But it always returns empty array. – Rifat Apr 07 '21 at 10:06
  • Read my answer. Lots of problems here. For Vuex to be reactive, you need to update values in a commit. Secondly, commits should always have no side effects and only update a single store item. You can chain commits, or run other methods from commits using actions – Jordan Apr 07 '21 at 10:07

1 Answers1

4

I see lots of small problems with this.

First of all, it looks like you've put addToCart and saveInLocalStorage judging by the fact you are committing saveInLocalStorage.

Mutations should only be used to set the state of a single Vuex variable.

They should be pure, meaning they should not have side effects.

You need to use an action for saveInLocalStorage, and an action to commit the addToCart mutation before using dispatch to run the saveInLocalStorage action.

Secondly, it's unclear where you're actually running this get from local storage function. Are you running it top level of the Vuex store?

If so, to solve the actual problem of it not updating the Vuex store, you will want to have the function responsible for getting the value of storedCart and using it to set cart as a mutation to ensure the Vuex store actually updates.

Lastly, there's no need to use a ternary here. Simply set the Vuex cart object to be an empty array.

Jordan
  • 2,245
  • 6
  • 19
  • Can you give me some idea how can I make a function which will update cart and set it to storeCart – Rifat Apr 07 '21 at 16:43
  • Well that's just done with a mutation. Do you mean one that will load it from local storage and set it? Again that's got to be a mutation too. Anything that updates Vuex variables need to be a mutation. Anything that has side effects needs to be an action. Actions can use mutations. read this :) https://vuex.vuejs.org/guide/actions.html to learn about actions – Jordan Apr 07 '21 at 16:54
  • You should create an action that saves to local storage, and then commits a mutation to push to cart. Then you should create a mutation that gets from local storage and sets the store data – Jordan Apr 07 '21 at 16:55
  • Let's say i have a mutation getCartFromLocal() where i het my data from local storage. Where should i commit that mutation? – Rifat Apr 07 '21 at 17:27
  • You can call it from anywhere you want, really. I'd personally call it in the `created()` lifecycle hook of your layout/page component - the first, topmost component. If it relies on components being mounted first, use `mounted()` instead – Jordan Apr 07 '21 at 18:04