warning!: es6 required
- Mutation-type based call.
- Simple Action ( by-pass payload into mutation )
- Promise Action ( commit pending, success, error mutation after api then() call )
- Provide ignore catch error option
Using npm:
$ npm i vuex-store-action
Using yarn:
$ yarn add vuex-store-action
const SET_TOGGLE_MENU = 'SET_TOGGLE_MENU';
const actions = {
setToggleMenu: createAction(SET_TOGGLE_MENU)
};
const mutations = handleMutations({
[SET_TOGGLE_MENU](state, toggle) {
state.currentToggle = toggle;
}
});
// Promise api
const GET_ARTICLE = 'GET_ARTICLE';
const getArticleInfo = params => axios.get(`http://api.test.com/article/${params.cardNo}`);
const state = {
article: {}
};
const actions = {
getArticle: createAction(GET_ARTICLE, params => getArticleInfo(params)),
};
const mutations = handleMutations({
[GET_ARTICLE](state, article) {
state.article = article;
}
});
// Promise api
const GET_ARTICLE = 'GET_ARTICLE';
const getArticleInfo = params => axios.get(`http://api.test.com/article/${params.cardNo}`);
const state = {
article: {}
};
const actions = {
getArticle: createAction(GET_ARTICLE, params => getArticleInfo(params)),
};
const mutations = handleMutations({
[GET_ARTICLE]: {
pending(state) {
// after api call
},
success(state, article) {
// after api then success
state.article = article;
},
error(state, error) {
// after api then error
console.log(error);
}
}
});
// Promise api
const GET_ARTICLE = 'GET_ARTICLE';
const getArticleInfo = params => axios.get(`http://api.test.com/article/${params.cardNo}`);
const actions = {
getArticle: createAction(GET_ARTICLE, params => getArticleInfo(params), true),
};
MIT