Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Structuring Vuex modules with relations

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    This is just an extension of what Mantas Daračiūnas has already answered.
    As showing in picture use @click=function(id) in CampaignList.vue then use state/getters values in function to look for this campaign.
    (I am assuming there is only one API to get all the data)

    Then you can dispatch this data in store to be accessed in CampaignShow.vue or pass them as props directly in CampaignShow.vue.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search