Магазин Vuex недоступен во внешних js файлах

Question

Архитектура моего приложения прикреплена сюда

Архитектура моего приложения

Итак, в моем случае использования я просто хочу использовать геттеры в перехватчике Ax ios (/../src/app/shared/services/http-client/http-client.js), поэтому я могу прикрепить токен авторизации в заголовке, но когда я импортирую хранилище из /../src/app/app-state.js, он выдает ошибку, как показано ниже

Uncaught TypeError: Cannot read property 'getters' of undefined
at eval (vuex.esm.js?2f62:340)
at Array.forEach (<anonymous>)
at assertRawModule (vuex.esm.js?2f62:339)
at ModuleCollection.register (vuex.esm.js?2f62:244)
at eval (vuex.esm.js?2f62:258)
at eval (vuex.esm.js?2f62:123)
at Array.forEach (<anonymous>)
at forEachValue (vuex.esm.js?2f62:123)
at ModuleCollection.register (vuex.esm.js?2f62:257)
at new ModuleCollection (vuex.esm.js?2f62:218)

app-state. js (vuex store) /../src/app/app-state.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";
import { appName } from '../environment/environment'

import { authState } from './auth'
import { organizationState } from "./organization"

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    authState,
    organizationState
  },
  strict:false,
  plugins: [
    createPersistedState ({
      key: appName,
    })
  ]
});

main. js

import Vue from 'vue';

import './plugins';
import i18n from './plugins/i18n'
import './plugins/izitoast'

import App from './app/app.vue';
import DEFINES from './plugins/defines'

import './main.scss';
import router from './app/app-routes';
import store from './app/app-state';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;
Vue.prototype.DEFINES = DEFINES;

new Vue({
  router,
  store,
  vuetify,
  i18n,
  render: h => h(App)
}).$mount('#app');

** Состояние организационного модуля (пример модуля) **

import { list } from '../services'
import { getField, updateField } from 'vuex-map-fields';

/** Initial State */
const initialState = {
    loading: false,
    data: null,
    error: null
}

/**
 * Organization data mutations
 */
const mutations = {
    updateField,
    /** Organization data request */
    ORGANIZATION_DATA_REQUEST(state,payload) {
        Object.assign(state, {loading: true, data: payload})
    },

    /** Organization data success */
    ORGANIZATION_DATA_SUCCESS(state, payload) {
        Object.assign(state, {loading: false, data: payload})
    },

    /** Organization data error */
    ORGANIZATION_DATA_ERROR(state) {
        Object.assign(state, {
            loading: false,
        });
    },

    /** Organization data reset */
    ORGANIZATION_DATA_RESET(state) {
        Object.assign(state,...initialState)
    }
}

const actions = {
    async list(context){
        // 1. Initiate request
        context.commit('ORGANIZATION_DATA_REQUEST');

        // 2. Get data from API and handle error
        var response = await list().catch(error => {
            context.commit('ORGANIZATION_DATA_ERROR')
            throw error;
        })

        // 3. Set data in state
        context.commit('ORGANIZATION_DATA_SUCCESS', response)
        return response
    }
}

const getters ={
    getField,
    getList: (state) => {
        return state.data
    },
}


export default {
    namespaced: true,
    mutations,
    actions,
    getters,
    state: initialState
}

состояние orjanization. js, которое объединяет все состояния функций

import { organizationList } from "./shared/state"

export default {
    modules: {
        organizationList
    }
}

Answer 1

ну, если вы хотите получить доступ к модулям Vuex в файле js, вы можете импортировать хранилище vuex и использовать его, вот мой код, который вы можете видеть, я использую действия Vuex в Ax ios:

import Store from "@/store/index";
import axios from "axios";

const userRole = localStorage.role ? `${localStorage.role}` : "";

let config = {
    baseURL: process.env.VUE_APP_BASE_URL + userRole,
    headers: {
        Authorization: "Bearer " + localStorage.token
    },
};

const _axios = axios.create(config);
// Add a response interceptor
_axios.interceptors.request.use(
    function(config) {
        Store.dispatch("loader/add", config.url);
        return config;
    },
    function(error) {
        Store.dispatch("loader/remove", error.response.config.url);
        return Promise.reject(error);
    }
);

_axios.interceptors.response.use(
    function(response) {
        // Do something with response data
        Store.dispatch("loader/remove", response.config.url);
        return response;
    },
    function(error) {
        Store.dispatch("loader/remove", error.response.config.url);
        return Promise.reject(error);
    }
);

export const $http = _axios;

Надеюсь, этот код вам поможет