Is it possible to access Vuex outside of a Vue component using vuex-class?
In a typical scenario, the process is quite straightforward:
// some JS file
import store from './../store'; // path to Vuex store
store.commit('ux/mutationName', somePayload)
However, if you are utilizing vuex-class and have a Vuex module set up like this:
import { Module } from 'vuex';
import { RootState } from '@/types/vuex/types';
import { MutationTree } from 'vuex';
import { GetterTree } from 'vuex';
const namespaced: boolean = true;
export interface UXState {
compLoading: boolean;
}
export const state: UXState = {
compLoading: false
};
export const mutations: MutationTree<UXState> = {
setCompLoading(state, payload: boolean): void {
state.compLoading = payload;
}
};
export const getters: GetterTree<UXState, RootState> = {
compLoading(state): boolean {
return state.compLoading;
}
};
export const ux: Module<UXState, RootState> = {
namespaced,
state,
mutations,
getters
};
To access Mutations from the store outside of a Vue component:
<script lang="ts">
import axios from 'axios';
import {Mutation} from "vuex-class";
const namespace: string = "ux";
@Mutation('setCompLoading', { namespace })
const setCompLoading!: (flag: boolean) => void;
async function fetchData() {
setCompLoading(true);
const resp = await axios.get('someURL');
setCompLoading(false);
}
fetchData();
</script>
How can I utilize vuex-class with TypeScript to access Mutations outside of a Vue component?