vuex-module-decorators rawError globally

1. Install vuex-module-decorators:

npm install vuex-module-decorators

1. Create a store module using vuex-module-decorators:

// store/modules/exampleModule.ts
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';

@Module({ namespaced: true })
class ExampleModule extends VuexModule {
  private _rawError: any = null;

  get rawError() {
    return this._rawError;
  }

  @Mutation
  setRawError(error: any) {
    this._rawError = error;
  }

  @Action({ rawError: true })
  async fetchSomething() {
    // Async operation that may throw an error
    try {
      // Your async logic here
    } catch (error) {
      this.context.commit('setRawError', error);
      throw error;
    }
  }
}

export default ExampleModule;

1. Register the module in your Vuex store:

// store/index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import ExampleModule from './modules/exampleModule';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    example: ExampleModule,
    // Add other modules here if any
  },
});

1. Use the store in your Vue component:

// YourVueComponent.vue
<script setup>
import { useStore } from 'vuex';

const store = useStore();
</script>

1. Dispatch an action that may throw an error with the rawError option:

// YourVueComponent.vue
<script setup>
const fetchData = async () => {
  try {
    await store.dispatch('example/fetchSomething', null, { rawError: true });
  } catch (error) {
    // Handle the error
  }
};

fetchData();
</script>

Note: Make sure to adapt the code to fit your specific use case and project structure.