Vuex modules | fetching data with axios

A simple example on how to use Vuex Modules.
We are going to create a module where we are fetching some posts from (jsonplaceholder.typicode.com/...) using Axios.
This is a modified version of my 2018 (Vuex | State management example with Axios) video.
Enjoy it!
Udemy course - Vue JS 2 - The Complete Guide: bit.ly/2Zb5UEs

[@teyvattraveler957]

I wished I saw this video earlier! Watching this helped me solved my problems of rendering using Vuex! Thank you very much

[@Sweetdev]

You are very welcome Teyvat!

[@dwikurniawan1376]

Thank you very much ! Now I understand namespace module clearly

[@unmy400]

Thank you very much ! love your tutorials :)

[@logoproga6198]

nice! thank you, man!

[@rullyhell2938]

thank you so much ❤️

[@Sweetdev]

You're welcome 😊

[@IonutBucur-o_0]

Thank you!

[@Sweetdev]

You are very welcome Ionut!

[@tuyishime2501]

thank you sir.

[@Sweetdev]

You are very welcome !

[@jilverdelacruzflores9107]

Thank you. First of all a thousand apologies I am new in vueJs, an query, that means that in each module I have to import axios, is there any way to only import it once?

[@Sweetdev]

Don't apologies... We are all here to learn! If you don't want to imported in only in the modules that you needed, you can imported in to your main.js
Or if you use something like Nuxt Js you can use the axios module.
i hope that can help you! If not please let me know

[@brunobernard86]

Thank you very much for this. It's super clean as explanation.
I have some questions:
1. I want to have default value for search filters. Then I want to update them, before I press search which launch an axios call. How can I achieve that ?
2. Binding, can I bind a value in my vue component to store, when the v-model updates the variable ? I want to update the store, and vice versa.
3. Does loading tones of state slow down a component ?

[@Sweetdev]

Hi Joseph...
1. You can set a default value in your store and update when you make the call.
2. I'm not really sure what you want to do, but you can use a store value for your v-model and use watch: {} to update your store value on change.
3. The idea of modular Vuex is to load just what you want. Also in mapState('yourStoreItem') from your component you just load the value that you need.
Hope this is answer your questions 🙂

[@MohdSuhairiAhmadSoobni]

Thank you very much for the great tutorial update. Would you mind sharing the source code

[@Sweetdev]

Hey Mohd!
Of course I don't mind... the problem is that I don't have the source code :-D I just create locally the app for the purpose of the example.
Let's do this.... ( github.com/sweetflavor/imagen-app-base ) this is a Nuxt app which is doing a similar thing and maybe can be helpful for you until I upload the repo of this example. In case you needed sooner let me know and I will make for you.

[@street15fc]

hello,
i got this error!
Error in created hook: "TypeError: Cannot read property 'dispatch' of undefined"

[@Sweetdev]

Hi Zihad. Try to play with the naming ... e.g. dispatch('post/actionToDispatch...

[@Corzhy0]

I keeping getting this errror. [vuex] unknown action type: questions/loadQuestions

[@Sweetdev]

Hi Corzah. Are you specified "namespaced: true" ?

[@cristiancananau]

the problem ist in action you must to write it write "actions",, i'm sure that you forgot that S

[@Corzhy0]

Have you got Instagram?

[@Sweetdev]

I don't have... my social media life is so poor that I only have RUclips channel man! :-D

[@brothercaleb]

Text is too small

[@Sweetdev]

Thank you for the feedback. I will have in mind.