Structuring Vuex modules with relations

Question

Im relatively new to vue and vuex. I need some help with how to structure my vuex store and/or local state in the components.

I have the following data structure (facebook marketing fyi)

- campaigns
- adsets: Is a group of ads. Relation = campaign_id
- ads: Relation = adset_id

I have two pages/routes, CampaignList.vue (/campaign) and CampaignShow.vue (/campaign/{campaignId}). Each route has its own api-call to fetch campaigns in either "list"-format (/api/campaign) or a single campaign with "show"-format (/api/campaign/{id}) "Show"-format has more data.

The list as expected will list all campaigns. The show page will show the campaign data (CampaignData component), list all adsets (Adsets component) and when selecting an adset, fetch and display all ads in that adset (Ads component). When editing ads, a Modal component will popup. That said i need to share data between components.

How am i structuring this with vuex modules and/or local state in a component?

Do my Show page has it's own module, eg campaign.js and my List page campaigns.js? If that is the case, how to i structure the module on Show page?

Big question i know, but i'm really stuck here. Thanks in advance.

Mantas Daračiūnas Mantas Daračiūnas · Accepted Answer · 2020-06-11T20:14:34

If that's all you have in your application you can store all data in store/index.js file which is just the VUEX index file.

export default {
  state: {
    campaigns: [],
    adsets: [],
    ads: []
  }
}

When you retrieve required data (via state or if modifications needed - getters) to CampaignShow.vue you can and probably should pass data to components via props The same applies to the Modal component.

Structuring Vuex modules with relations

2 Answers