从服务文件中调度突变

时间:2016-10-03 15:43:48

标签: javascript vue.js vuex

我有一个ApiService(),我将我的API调用抽象为。我想 来自内部的dispatch('SET_BUSY')dispatch('SET_NOT_BUSY')应用级突变 服务,但我收到以下错误:

TypeError: dispatch is not a function. (In 'dispatch('SET_BUSY')', 'dispatch' is undefined)

/vuex/actions.js

import { ApiService } from './services';

export const setAppMode = function ({ dispatch }) {
  ApiService({
    noun: 'Application',
    verb: 'GetMode'
  }, response => {
    dispatch('SET_APP_MODE', response.Data.mode);
  },
  dispatch);
};

/vuex/services.js

import Vue from 'vue';

export const ApiService = (options = {}, callback, dispatch) => {
  let endpoint = 'localhost/api/index.php';
  let parameters = options.data;

  dispatch('SET_BUSY');

  Vue.http.post(endpoint, parameters, []).then((promise) => {
    return promise.text();
  }, (promise) => {
    return promise.text();
  }).then(response => {
    response = JSON.parse(response);

    dispatch('SET_NOT_BUSY');

    if (response.Result === 'ERROR') {
      console.log('ERROR: ' + response.Error.Message);
    }

    callback(response);
  });
};

1 个答案:

答案 0 :(得分:1)

动作功能需要商店实例作为第一个参数。这通常由Vuex自动完成。

在Vue实例中使用动作时,在Vuex 1中完成它的方法如下:

this.setAppMode()

现在您可以使用store并将商店自动作为第一个参数使用。

注意:您还需要设置VM的import store from `./store` // and inside the VM options: { store: store } 属性

store

如果this.setAppMode(store); 尚未设置为vm实例,您仍可以手动将其作为参数传递:

var log = new LoggerConfiguration()
    .Enrich.With<MySerilogEnricher>()
    .ReadAppSettings()
    .CreateLogger();