Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

How to use the nuxt context in an vuex store?

  • FAQ
  • How to use the nuxt context in an vuex store?

Using the current Nuxt context and therefore $storyapi and $storybridge the easiest way to achieve that is to pass the parts of the context you need into the action of your Nuxt.js Vuex store.

In your fetch / asyncData you can dispatch your action:

context.store.dispatch('loadInActionExample', { data: 'test', context: context })

And in your store actions you can either go for this.$storyapi directly or use the content of the payload to access the data/context you need.

export const actions = {
  loadInActionExample(storeContext, payload) {
    // available: this.$storyapi
    // payload.data -> actual action parameters
    // payload.context -> whole nuxt context -> exchange that to smaller parts that you need.

    // execute your action and set data
    
    storeContext.commit('setData', payload.data)
  }
}