architecting-vuex-store-large-scale-vue-application

[utterances-bot]

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.

https://haxzie.com/architecting-vuex-store-large-scale-vue-application?utm_source=Vue.js%20Developers&utm_campaign=1afb0d1425-EMAIL_CAMPAIGN_2019_07_01_05_30_COPY_01&utm_medium=email&utm_term=0_ae2f1465e2-1afb0d1425-173493589

[NeiPCs]

Great Job! That's really well organized, I'll love to organize like you did from now.

[afzalsayed96]

Waiting for the second part

[gmeral]

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()

?

[haxzie]

@gmeral That's something I missed out! Thanks for noticing it :smile: I have updated the article and simplified the code snippets. Thank you for the suggestion.

[botmaster]

I really like this way of organizing the store. Great job!

[cooper09]

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?

[haxzie]

@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

[cooper09]

Which file does this code go in...App.vue or HelloWorld.vue?

On Sun, Oct 27, 2019 at 12:07 PM Musthaq Ahamad notifications@github.com wrote:

@cooper09 https://github.com/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

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/haxzie/haxzie.com/issues/3?email_source=notifications&email_token=AAGNILK2KICF2FCLF5K6MJ3QQW4FZA5CNFSM4JBAS4T2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECLB23Y#issuecomment-546708847, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGNILKN6IDFFUMKPI3G4KTQQW4FZANCNFSM4JBAS4TQ .

-- cooper smith http://www.sonyainc.net/

CONFIDENTIALITY NOTE: The information is intended for the use of the individual or entity to which it is addressed and may contain information that is privileged, confidential and exempt from disclosure. If the reader of this message is not the intended recipient or an employee or agent responsible for delivering the message to the intended recipient, you are hereby notified that any retention, dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately .

[cooper09]

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.

[haxzie]

@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>

[cooper09]

Ah...that got it! Thanx...

On Tue, Oct 29, 2019 at 2:07 PM Musthaq Ahamad notifications@github.com wrote:

@cooper09 https://github.com/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.

{{ getVariable }}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://github.com/haxzie/haxzie.com/issues/3?email_source=notifications&email_token=AAGNILOTJ54PNJAIXH4FTPDQRB3VDA5CNFSM4JBAS4T2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECRQ4XQ#issuecomment-547556958>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAGNILJZJNRVFHQSDBFYORDQRB3VDANCNFSM4JBAS4TQ>
.

-- cooper smith http://www.sonyainc.net/

CONFIDENTIALITY NOTE: The information is intended for the use of the individual or entity to which it is addressed and may contain information that is privileged, confidential and exempt from disclosure. If the reader of this message is not the intended recipient or an employee or agent responsible for delivering the message to the intended recipient, you are hereby notified that any retention, dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately .

[mjpsr11]

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?

[haxzie]

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.