Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

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