Блог

Использование Vue 3. У меня есть плагин аутентификации, который устанавливает globalProperties.$auth (и, в свою очередь, также экземпляр axios globalProperties.$auth.axios )

 export default {
  install: function (app, options) {
    options.router.beforeEach((to, from, next) => {
      authDirects(to, next, options.store, options.config.loginRoute);
    });

    app.config.globalProperties.$auth = authMethods(options.store, options.config)
  }
}
 

использование в компонентах нормально, но я перехожу к шаблонам vuex, поэтому у меня есть эти файлы:

 // store/modules/playlists.js

import PlaylistsAPI from '@/api/playlists'

const actions = {
  getAllPlaylists({ commit }) {
    PlaylistsAPI.index(
      (playlists) => commit('setPlaylists', playlists),
      (playlists) => commit('setPlaylists', []),
    )
  },
  selectPlaylist({ commit }, playlist) {
    PlaylistsAPI.show(playlist,
      (playlist) => commit('setPlaylist', playlists),
      (playlist) => commit('setPlaylist', {}),
    )
  }
}
 

 // api/playlists.js

import { getCurrentInstance } from 'vue'

export default {
  index: function (callback, errCallback) {
    getCurrentInstance().appContext.config.globalProperties.$auth.axios
      .get('/playlists')
      .then(response => {
        callback(response.data.playlists)
      })
      .catch(error => {
        console.log(error.response.data.error)
        errCallback([])
      })
  },

  show: function (playlist, callback, errCallback) {
    getCurrentInstance().appContext.config.globalProperties.$auth.axios
      .get('/playlists/'   playlist.token)
      .then(response => {
        callback(response.data.playlist)
      })
      .catch(error => {
        console.log(error.response.data.error)
        errCallback({})
      })
  },
}
 

как вы можете видеть, я пытаюсь использовать getCurrentInstance().appContext.config.globalProperties.$auth.axios соответствующий аутентифицированный клиент для выполнения http-вызовов.

однако это не удается после первого запроса с Uncaught TypeError: Cannot read property 'appContext' of null

как правильно поступить? могу ли я каким-либо образом изменить плагин для использования a provide ?