Decidí reescribir mi aplicación de spa vue a nuxt, pero tuve un problema en spa, en vue solo podía importar la tienda y usarla, pero en nuxt no puedo hacer lo mismo, obtengo un objeto indefinido cada vez
en vue spa tenía una carpeta con algunos servicios api y con api.js principal que incluye este código
import axios from 'axios' import store from '@/store/index' export default () => { return axios.create({ baseURL: `http://myip.com/`, headers: { Authorization: `Bearer ${store.state.token}` } }) }luego, en otros archivos js, solo importo este archivo api.js y uso algo como esto
import Api from '@/services/Api' export default { register (credetinals){ return Api().post('register', credetinals) }, login (credetinals){ return Api().post('login', credetinals) } }así que tuve 10 servicios de archivos js donde incluí api.js y luego en archivos * .vue solo importé este servicio, ¿cómo puedo hacer lo mismo en nuxt?
Si agrega su estado en /store/index.js , se agregará automáticamente en la aplicación, no necesita importarlo en su archivo.
Lo que puedes hacer es intentar verificar el estado usando:
window.$nuxt.$store.state
Además, no olvide agregar una condición process.browser ya que desea verificarlo en el navegador.
Esto es lo que hice en mi archivo api.js para su referencia:
// Libraries import axios from 'axios'; // API Instance export const instance = axios.create({ baseURL: 'http://myip.com/', headers: {}, validateStatus: status => { return status; }, }); // API Interceptors instance.interceptors.request.use(config => { if (process.browser) { const userToken = window.$nuxt.$store.getters.getUserToken; // Set Authorization token if (userToken) { config.headers['Authorization'] = `Bearer ${userToken}`; } } return config; }, function (error) { return Promise.reject(error); });