从VUEX Store的操作发送UI通知

时间:2018-02-14 00:52:24

标签: vue.js vuejs2 vuex alertify vuex-modules

当我的API请求在商店内部成功完成时,我使用https://www.npmjs.com/package/vue-alertify发送通知:

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,     
});

我从像

这样的组件@click方法调度我的动作
persist() {
  const { $store, } = this;

  $store.dispatch(ca.PROGRESS_START);
  $store.dispatch(ca.API_SUCCESS, 'Hey little!');
},

它在这条线上失败了 this._vm。$ alertify.success(消息);

有错误 enter image description here

但是,如果我启用调试器并从控制台键入相同的命令 - 它可以工作,我在浏览器上看到$ alertify通知。

我做错了什么?

0 个答案:

没有答案