vuex-xhr-state
Version:
Use Vuex to manage the state of you're ajax calls.
186 lines (185 loc) • 7.49 kB
JavaScript
import makeActions from './actions';
import makeGetters from './getters';
import { payloadToKey } from './helpers';
import { ACTION, GET } from './keys';
import makeMutations from './mutations';
import makeState from './state';
var SEPARATOR = '/';
var VuexXhr = /** @class */ (function () {
function VuexXhr(options) {
var _this = this;
this.namespace = '';
this.setNamespace = function (namespace) {
_this.namespace = namespace;
};
this.mapPending = function (payload) {
return { key: _this.namespace + SEPARATOR + GET.PENDING, payload: payload };
};
this.mapHasError = function (payload) {
if (!_this.options.cache) {
throw new Error('mapHasError is not available on this object');
}
return { key: _this.namespace + SEPARATOR + GET.HAS_ERROR, payload: payload };
};
this.mapFetched = function (payload) {
if (!_this.options.cache) {
throw new Error('mapFetched is not available on this object');
}
return { key: _this.namespace + SEPARATOR + GET.FETCHED, payload: payload };
};
this.mapData = function (payload) {
if (!_this.options.cache) {
throw new Error('mapData is not available on this object');
}
return { key: _this.namespace + SEPARATOR + GET.DATA, payload: payload };
};
this.mapResponse = function (payload) {
if (!_this.options.cache) {
throw new Error('mapResponse is not available on this object');
}
return { key: _this.namespace + SEPARATOR + GET.RESPONSE, payload: payload };
};
// tslint:disable-next-line:no-any
this.pending = function (getters, payload) {
var getter = _this.findGetter(getters, GET.PENDING);
return getter(payload);
};
// tslint:disable-next-line:no-any
this.hasError = function (getters, payload) {
if (!_this.options.cache) {
throw new Error('hasError is not available on this object');
}
var getter = _this.findGetter(getters, GET.HAS_ERROR);
return getter(payload);
};
// tslint:disable-next-line:no-any
this.fetched = function (getters, payload) {
if (!_this.options.cache) {
throw new Error('fetched is not available on this object');
}
var getter = _this.findGetter(getters, GET.FETCHED);
return getter(payload);
};
// tslint:disable-next-line:no-any
this.data = function (getters, payload) {
if (!_this.options.cache) {
throw new Error('data is not available on this object');
}
var getter = _this.findGetter(getters, GET.DATA);
return getter(payload);
};
// tslint:disable-next-line:no-any
this.response = function (getters, payload) {
if (!_this.options.cache) {
throw new Error('response is not available on this object');
}
var getter = _this.findGetter(getters, GET.RESPONSE);
return getter(payload);
};
this.dataNamespace = function () {
return _this.namespace + SEPARATOR + GET.DATA;
};
this.fetch = function () {
return _this.namespace + SEPARATOR + ACTION.FETCH;
};
this.send = function () {
return _this.namespace + SEPARATOR + ACTION.SEND;
};
this.invalidate = function () {
return _this.namespace + SEPARATOR + ACTION.INVALIDATE;
};
this.invalidateAll = function () {
return _this.namespace + SEPARATOR + ACTION.INVALIDATE_ALL;
};
this.forceFetch = function () {
if (!_this.options.cache) {
throw new Error('forceFetch is not available on this object');
}
return _this.namespace + SEPARATOR + ACTION.FORCE_FETCH;
};
this.reset = function () {
return _this.namespace + SEPARATOR + ACTION.RESET;
};
// tslint:disable-next-line: no-any
this.setState = function (payload, mockState) {
if (mockState === undefined) {
mockState = payload;
payload = undefined;
}
if (mockState.data && !mockState.response) {
mockState = {
error: false,
pending: false,
response: {
data: mockState.data,
},
};
}
// if (mockState.data && !mockState.response) {
// mockState.response = {
// data: mockState.data,
// }
// }
_this.state.ERROR[payloadToKey(payload)] = mockState.error;
_this.state.FETCHED[payloadToKey(payload)] = (mockState.response);
_this.state.PENDING[payloadToKey(payload)] = mockState.pending;
_this.state.RESPONSE[payloadToKey(payload)] = mockState.response;
};
this.setMethod = function (stub) {
_this.actions.method = stub;
};
this.setVuexXhrCreator = function (vuexXhrCreator) {
_this.vuexXhrCreator = vuexXhrCreator;
};
/**
* Invalidate the cache of the group this method belongs to
*/
this.inValidateGroup = function () {
if (!_this.vuexXhrCreator) {
return;
}
_this.vuexXhrCreator.invalidateAll();
};
this.mergeStore = function (store) {
if (store.mutations) {
Object.assign(_this.mutations, store.mutations);
}
if (store.actions) {
Object.assign(_this.actions, store.actions);
}
if (store.getters) {
Object.assign(_this.getters, store.getters);
}
};
// tslint:disable-next-line:no-any
this.findGetter = function (getters, index) {
if (typeof getters[_this.namespace + SEPARATOR + index] !== 'undefined') {
return getters[_this.namespace + SEPARATOR + index];
}
if (typeof getters[index] !== 'undefined') {
return getters[index];
}
throw new Error('VuexXhr Error. Getter not found (' + index + ')' + _this.namespace);
};
this.namespaced = true;
this.options = options;
this.options.alwaysRefetch = this.options.alwaysRefetch === undefined ? true : this.options.alwaysRefetch;
this.state = makeState(this.options);
this.mutations = makeMutations(this.options);
this.actions = makeActions(this.options.alwaysRefetch, this.options.method, this.inValidateGroup);
this.getters = makeGetters(this.options.cache ? this.options.cache : true);
if (this.options.store) {
this.mergeStore(this.options.store);
}
}
VuexXhr.prototype.mockCall = function (_, data) {
var promise = new Promise(function (resolve) {
resolve({
data: data,
});
});
this.setMethod(function () { return promise; });
};
return VuexXhr;
}());
export default VuexXhr;