architecting-vuex-store-large-scale-vue-application
utterances-bot opened this issue · comments
Architecting Vuex store for large scale Vue.js applications | Haxzie | Musthaq Ahamad
At the heart of all large scale Vue.js application lies the store which holds all its data. The Vuex store in a Vue.js application acts a a single source of truth which provides great performance and reactivity out of the box.
Great Job! That's really well organized, I'll love to organize like you did from now.
Waiting for the second part
Super nice article, thanks !
Is there a particular reason why you initialise the state like this :
const state = {
...initialState()
}
instead of just assigning it like this :
const state = initialState()
?
@gmeral That's something I missed out! Thanks for noticing it 😄 I have updated the article and simplified the code snippets. Thank you for the suggestion.
I really like this way of organizing the store. Great job!
Just trying to pull data from the store to the ocmponent. The only code I added was to retrieved the data from store but nothing happens.
For reference, template.store.js:
result:
Is this the right syntax to simply read a store variable? Am I missing a step?
@cooper09 you are using a store module, so you need to reference the store module if the namespace is set to true. ie. you need to access the variable through the store module.
import { mapGetters, mapState } from 'vuex'
computed: {
...mapGetters('Template', ['getVariable']);
}where template is the module name
Apparently I don't have the syntax right. The page still comes back blank. I've made no changes to the template.store.js side.
@cooper09 if you have referred the article to auto-import the store modules, you don't have to specify template.store.js while mapping. You need to do it like below
computed: {
...mapGetters('Template', ['getVariable'])
}
You don't need to have a separate computed property neither. If you rewrite as above example, you will be able to use the mapped getter method as a computed property in your component.
<p>{{ getVariable }}</p>
Great article and a way to organize for scale!
I can see using namespace to keep same name or similar actions distinguished, but it seems to come at a cost. If my components use several actions from different modules, mapping the states / actions requires additional lines of code (instead of just one map call for several states or actions).
Can you give a more driving reason to use namespace that overcomes the cost of more code?
hey @mjpsr11
Using namespaces and mappers are a great way to organize large Vuex stores and to enforce strict coding guidelines to only use mapGetters and mapActions. The number of lines of code is not an issue, since you can still map all the actions or getters in one line each. Either by appending the module name infront of the actions.
...mapActions(['Module1/ActionX', 'Module2/ActionY' ]);
When building a large application, it's better to consider the maintainability and reusability of the code we write. It's a trade off between number of lines of code and mainatainable/readable code.