I'm using https://www.npmjs.com/package/vue-alertify to send notification when my API request has been succesful inside action of the store:
import Vue from 'vue';
import Vuex from 'vuex';
import {
API_SUCCESS,
API_FAILURE,
} from './types/common';
Vue.use(Vuex);
/**
* Common State
* @property {boolean} isProgress - if async operation is in progress
*/
const state = {
isProgress: false,
};
/**
* Common Getters
* @property {boolean} isProgress - Checks if the async op is in progress
*/
export const getters = {
isProgress: state =>
state.isProgress,
};
/**
* Common Actions
*/
const actions = {
[API_SUCCESS]: ({}, message) => {
console.log(this);
this._vm.$alertify.success(message);
},
[API_FAILURE]: ({}, message) => {
this._vm.$alertify.failure(message || 'Failure');
},
};
/**
* Common Mutations
*/
const mutations = {
[PROGRESS_START]: (state) => {
state.isProgress = true;
},
[PROGRESS_STOP]: (state) => {
state.isProgress = false;
},
};
export default new Vuex.Store({
state,
getters,
actions,
mutations,
});
I'm dispatching my action from components @click method like this
persist() {
const { $store, } = this;
$store.dispatch(ca.PROGRESS_START);
$store.dispatch(ca.API_SUCCESS, 'Hey little!');
},
And it fails with on this line this._vm.$alertify.success(message);
with the error
however If I enable debugger and from console type the same command - it works and I see $alertify notification on my browser.
