Can I call storyapi from vuex?

Question

I'm using storyblok-nuxt module. I plugged it in nuxt.cofig.js and it works fine in page when I call it directly in the asyncData method as such:

  asyncData({ app }) {
    return app.$storyapi.get("cdn/stories/articles", {
        version: "draft"
      })

In order to call it from vuex I'm importing it:

import storyapi from 'storyapi'

But Nuxt gives me an error:

Cannot find module 'storyapi'

Can I use this module in vuex, and if yes - what's solution?

Answer 1

Using storyapi with Nuxt is very easy. In your asyncData you can dispatch your action like:

asyncData ({ store }) {
  store.dispatch('loadSettings', {version: "draft"})
}

And in your store actions, you can go for this.$storyapi directly. There is no need to import anything. Nuxt take cares of everything for you:

export const actions = {
  loadSettings({commit}, context) {
    return this.$storyapi.get("cdn/stories/articles", {
      version: context.version
    }).then((res) => {
      // execute your action and set data    
      commit('setSettings', res.data)
    })
  }
}

For more info:

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