0
votes

I was doing my own project(for study) and I've almost done with it. So me and my senior did code review together but seems like I did wrong in my vuex code. I wrote state(to get the state data) and got 'em in getters. then setters(to set the changed data and send it to mutation purpose) in actions() following vue official doc. but my Senior said I shouldn't write that way because actions is only for async....... This is where i'm lost. so basically, our company's large app(yet, it's a prototype written by my Senior only) doesn't event have a dot in vuex actions()....

Since we are Koreans, and it's our first time to write in vue, so kind of difficult to fully understand what's written in vue official doc, so we googled a lot then ended up having zero conclusion. most of korean developers wrote example codes just like my Senior did.. Could anyone please explain when to use mutations and actions for getters and setters clearly..? I mean, i thought they're doc and other posts are quite clear, but from Korean developers' blog posts.... I'm lost.

doc I've followed: https://vuex.vuejs.org/guide/actions.html

1
"I wrote getters ... and got 'em in mutations" 👈 what does that mean? Could you please show some code? "actions is only for async" 👈 that is not exactly true - Phil
Oops! My bad! I meant 'i wrote state and got them in gatters...' Sorry! I'd love to attach some codes but this code format.. field..? that gray background doesn't work for some reason. I don't know why it's keep breaking the code format - Chawchawchaw

1 Answers

3
votes

As you can see in the official document

  1. Instead of mutating the state, actions commit mutations.
  2. Actions can contain arbitrary asynchronous operations.

Actions is the way you react to user's interactions, this is where you notify the store something happens, then you can commit to change the state value in some properties, in actions, for example if user click on Sign in button, you will notify the store what inputs you have in components you may call something like this in your component this.$store.dispatch('LOGIN', {username, password}) that is where action called.