How can I get access to Vuex outside of a Vue ponent with vuex-class?

In normal situation it is pretty simple:

// some JS file
import store from './../store'; // path to Vuex store

storemit('ux/mutationName', somePayload)

But I am using vuex-class and I have Vuex module:

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 {
  pLoading: boolean;
}

export const state: UXState = {
  pLoading: false
};

export const mutations: MutationTree<UXState> = {
  setCompLoading(state, payload: boolean): void {
    statepLoading = payload;
  }
};

export const getters: GetterTree<UXState, RootState> = {
  pLoading(state): boolean {
    return statepLoading;
  }
};

export const ux: Module<UXState, RootState> = {
  namespaced,
  state,
  mutations,
  getters
};

Fom Vue ponent I have access to store Mutations in this way:

<script lang="ts">
  import axios from 'axios';
  import {Component, Vue} from 'vue-property-decorator';
  import {Mutation} from "vuex-class";
  const namespace: string = "ux";

  @Component({
    name: 'CompName'
  })
  export default class AppNavigationBar extends Vue {

    @Mutation('setCompLoading', { namespace })
    setCompLoading!: (flag: boolean) => void;

    async created() {
      this.setCompLoading(true);
      const resp = await axios.get('someURL');
      this.setCompLoading(false);
    }
  }
</script>

How can I get access to Mutation using vuex-class with TS outside of a Vue ponent?

How can I get access to Vuex outside of a Vue ponent with vuex-class?

In normal situation it is pretty simple:

// some JS file
import store from './../store'; // path to Vuex store

store.mit('ux/mutationName', somePayload)

But I am using vuex-class and I have Vuex module:

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 {
  pLoading: boolean;
}

export const state: UXState = {
  pLoading: false
};

export const mutations: MutationTree<UXState> = {
  setCompLoading(state, payload: boolean): void {
    state.pLoading = payload;
  }
};

export const getters: GetterTree<UXState, RootState> = {
  pLoading(state): boolean {
    return state.pLoading;
  }
};

export const ux: Module<UXState, RootState> = {
  namespaced,
  state,
  mutations,
  getters
};

Fom Vue ponent I have access to store Mutations in this way:

<script lang="ts">
  import axios from 'axios';
  import {Component, Vue} from 'vue-property-decorator';
  import {Mutation} from "vuex-class";
  const namespace: string = "ux";

  @Component({
    name: 'CompName'
  })
  export default class AppNavigationBar extends Vue {

    @Mutation('setCompLoading', { namespace })
    setCompLoading!: (flag: boolean) => void;

    async created() {
      this.setCompLoading(true);
      const resp = await axios.get('someURL');
      this.setCompLoading(false);
    }
  }
</script>

How can I get access to Mutation using vuex-class with TS outside of a Vue ponent?

• javascript
• typescript
• vue.js
• vuex

Share Follow asked Jan 17, 2020 at 9:04 StanislavStanislav 69122 gold badges77 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Even though you are using vuex-class, you can still use mutations the old way:

import store from './../store';

store.mit('module/mutationName', payload);

Or, if you prefer to use the typed mutation directly:

import state from './../store/state';
import { MUTATION_NAME } from  './../store/mutations'; // Or wherever you have them

MUTATION_NAME(state, payload);