Skip to main content
[StoryblokStoryID:245122165]

Live article: https://www.storyblok.com/faq/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)
  }
}