Vuex 101 Nano #51
Vuex 101 Nano #51
Conversation
There was a problem hiding this comment.
Thank you so much for working on this, @imMarina! This is a great nano
I've added some comments/suggestions (debatable ofc)
Keep up the good job! 👍
workshop/nano1-vuex.md
Outdated
|
|
||
| ## 2. Step 1 - Installing Vuex | ||
|
|
||
| Since we are using codepen, the only thing we need to install Vuex is to add it to our list of |
There was a problem hiding this comment.
What do you think on renaming codepen to sandbox here? It might be confusing to people who use CodePen vs CodeSandbox
workshop/nano1-vuex.md
Outdated
| ## 2. Step 1 - Installing Vuex | ||
|
|
||
| Since we are using codepen, the only thing we need to install Vuex is to add it to our list of | ||
| dependencies, so go to the `Dependencies` button on the bottom left of your screen and add it to |
There was a problem hiding this comment.
In fact, it's Dependencies tab with Add Dependency button :)
| el: "#app", | ||
| components: { App }, | ||
| template: "<App/>", | ||
| store |
There was a problem hiding this comment.
Maybe we can add a note that this is ES6 shortcut for store: store?
workshop/nano1-vuex.md
Outdated
| In this case, we are using an **action** via *dispatch* to add a game to our store. | ||
|
|
||
| ::: tip 💡 | ||
| *Why am I not mutating the data with a commit?* It is a best practice to only commit from within actions. |
There was a problem hiding this comment.
I would disagree with this statement. Vuex docs doesn't have a strict recommendation for this as a best practice and Vue core team has different positions on this. While I personally support using only actions on component level, let's make the statement on best practices a bit softer: it's considered as a one of good practices for example. We can mention that it fact there is nothing bad in committing mutations directly when we have sync stuff but actions approach is more maintainable.
workshop/nano1-vuex.md
Outdated
| which will allow us to modify the whole array on one go. | ||
|
|
||
| ::: tip 💡 | ||
| Notice that we are using ES6 object destructuring in the first param. This way instead of having to pass |
There was a problem hiding this comment.
Let's add a link to destructuring
| Notice that we are using ES6 object destructuring in the first param. This way instead of having to pass | |
| Notice that we are using [ES6 object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) in the first param. This way instead of having to pass |
workshop/nano1-vuex.md
Outdated
| This only scratches the surface of Vuex, and an ideal scenario would be to use it on a multi-component | ||
| app where the state needs to be shared. | ||
|
|
||
| Try adding a new component Form.vue in which you add new games to your library using what you have learned! |
There was a problem hiding this comment.
| Try adding a new component Form.vue in which you add new games to your library using what you have learned! | |
| Try adding a new component `Form.vue` in which you add new games to your library using what you have learned! |
|
@jlooper maybe you can review the workshop as well? |
| ``` | ||
|
|
||
| Here we grab a copy of our `state.games` array into a `games` constant. | ||
| (It's important that we make a copy, since we should **NEVER** modify our state directly!). |
There was a problem hiding this comment.
I love how you explained the consept of not changing state outside of mutation! Good job 👍
| our project. | ||
|
|
||
| ::: tip 💡 | ||
| When working on a local project, you should first add the dependency with `npm install vuex` or |
There was a problem hiding this comment.
Awesome point for people who want to work not only in sandboxes! Must-have for all advanced nanos 👍
|
This is very cool! Thanks for this great contribution. Vuex is one of those hard-to-understand concepts that you've explained very clearly! I'd like to review/copyedit the next iteration. I recommend making Natalia's suggested changes, then I will go through and edit for style/clarity, sound good? |
|
@jlooper @NataliaTepluhina I've adjusted based on Natalia's comments. We can go with style/clarity now if you like as you suggested |
MD file for nano1-vuex