How to import Vuex state to an external js

jeimz173

Hi i am trying to import my Auth module’s state to an external js from my Store folder but, it returns undefined.

my goal here is to include my token to my Api but Auth returns empty. and when i checked it out to my dev tools its not empty.

// here is the external js (Api.js)
import Vue from 'vue'
import Auth from '../store/Auth'  // <- this returns an empty structure of my state

export default () => {
  return Vue.prototype.$axios.create({
    baseURL: `http://localhost:3000/`,
    headers: {
      Authorization: `Bearer ${Auth.state.token}`
    }
  })
}

here is my store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import Auth from './Auth'
import Bank from './Bank'
import Category from './Category'
import Courier from './Courier'
import Attribute from './Attribute'
import Shop from './Shop'
import Product from './Product'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true,
  plugins: [
    createPersistedState()
  ],
  modules: {
    Auth,
    Bank,
    Attribute,
    Category,
    Courier,
    Shop,
    Product
  }
})

export default store

Please help me thank you!

genyded

Make your JS file a Quasar App Plugin. Those can directly access the store and you do not need to import anything:

export default ({ app, router, store, Vue }) => {
    baseURL: `http://localhost:3000/`,
    headers: {
      Authorization: `Bearer ${store.Auth.state.token}`
    }
  })
}

That assumes you state is set up correctly. Don’t forget to add the plugin to quasar.conf.js. Also remember Vuex is not persisted across page refreshes by default.

We use something like this with localStorage:

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8000'
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

 export default ({app, router, Vue}) => { //<---NOTE YOU CAN ALSO ACCESS THE STORE HERE IF NEEDED AS IN THE ABOVE EXAMPLE

  // request interceptor - check auth
  axios.interceptors.request.use(function (config) {
    let token = false
    if (localStorage.getItem('ep-token') != null) { // auth check
      token = JSON.parse(localStorage.getItem('ep-token')).access_token
    }
    config.headers = Object.assign({}, { 'Authorization': `Bearer ${token}` }, config.headers)
    return config
  }, function (error) {
    // Do something with request error
    console.log('REQUEST ERROR:', error)
    return Promise.reject(error)
  })

  Vue.prototype.$axios = axios
}

So you can hopefully see that there are a few different ways to tackle this. Hope this at least helps get you going in the right direction.

prashant

I am new to quasar please let me know is there any better way to do it. I used vue-persistance module

import Vue from "vue";
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:5000/",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  },
  timeout: 10000
});

export default ({ store }) => {
  axios.defaults.headers.common["Authorization"] =
    "Bearer " + store.state.token;
};

Vue.prototype.$axios = axiosInstance;

// Here we define a named export
// that we can later use inside .js files:
export { axiosInstance };

s.molinari

@prashant - Please start new threads. This one is old and your question isn’t even relevant to it.

Scott

No More Posting New Topics!

How to import Vuex state to an external js