How to use vuex-rest-api with nuxt.js auth-module about vuex-rest-api HOT 15 CLOSED

found a solution for now:

I can register it by using the registerModule() method on the store, inside a plugin that is loaded after the axios initialization.

plugins/init-store-modules.js

export default async ({store, app}) => {
  await store.dispatch('initStoreModules', {store: store, axios: app.$axios})
}

store/index.js

import Vuex from 'vuex'
import userStore from './users'

const createStore = () => {
  return new Vuex.Store({
    state: {
    },
    mutations: {
    },
    // modules: {
    //   users: userStore()
    // },
    actions: {
      async initStoreModules ({state}, {store, axios}) {
        await store.registerModule('users', userStore(axios));
      }
    }
  })
}

export default createStore

You could also register that inside the plugin but I like to have the module registration inside the store.

@christianmalek Maybe that should be added to the readme with an example or similar.

from vuex-rest-api.

@christianmalek I think you could provide your package as a nuxt module, but that I would not know how to register the stores in a sane way.

from vuex-rest-api.

@juandl But you don't pass any specific axios instance in your code example which was necessary for nuxt-auth @appinteractive, doesn't it? So how does this work?

from vuex-rest-api.

Yes. It works with Nuxt.

from vuex-rest-api.

@christianmalek sorry I was not ready with the descriotion. I have an issue in conbination with nuxt-auth as the axios instance can`t be passed. At lease I don't know how.

from vuex-rest-api.

Could you please provide a link to nuxt-auth?

from vuex-rest-api.

sure added it to the description, ment auth-module and not nuxt-auth...
https://github.com/nuxt-community/auth-module

from vuex-rest-api.

currently I am at the state of having something ugly like this:

import Vuex from 'vuex'
import userStore from './users'

const createStore = () => {
  return new Vuex.Store({
    state: {
    },
    mutations: {
    },
    // modules: {
    //   users: userStore(Vuex)
    // },
    actions: {
      nuxtServerInit ({dispatch}, {app}) {
        dispatch('init', {store: app.store, axios: app.$axios})
      },
      async init ({state}, {store, axios}) {
        await store.registerModule('users', userStore(axios));
      }
    }
  })
}

export default createStore

with that I still have to call that on the client to instantiate the module with the correct axios instance

await this.$store.dispatch('init', {store: this.$store, axios: this.$axios})

from vuex-rest-api.

Hey @appinteractive !

I've just tried 30min to make the axios instance accessible to vuex-rest-api in combination with nuxt-auth (which uses nuxt-axios) and didn't find any solution. I didn't think about registering the store with an action. Nice idea!

At the moment I also don't know how I could simplify this process. Do you have any ideas?

I will definitely add this to the readme. Thanks!

from vuex-rest-api.

I will look into this. But I don't have much experience with nuxt.

from vuex-rest-api.

@appinteractive I've added an section: https://christianmalek.github.io/vuex-rest-api/miscellaneous.html#nuxt

from vuex-rest-api.

Yeah thanks for mentioning 😀

from vuex-rest-api.

@christianmalek New Update:

store/index.js

import Vuex from 'vuex'
import news from "./posts";

const createStore = () => {
	return new Vuex.Store({
		...news
	})
}

export default createStore

store/posts.js

import Vapi from "vuex-rest-api";

const posts = new Vapi({
  baseURL: "http://demo.com/api",
  state: {
      posts: []
    }
  })
  .get({
    action: "getPosts",
    property: "posts",
    path: "/posts"
  })
  .getStore();

export default posts;

from vuex-rest-api.

Hello @juandl !

The issue was passing a specific axios instance to Vapi. Does this work with your code?

from vuex-rest-api.

Hello @christianmalek, I had the same problem in Huxt.js in this way I solved it.

from vuex-rest-api.