How to import Vuex state to an external js



  • 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!



  • 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.