Vuex rest api consuming for scale
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am building an application which consumes an API.
I'd like to be able to make a module builder with prefixed actions, and mutations, and also middleware for async operations, so I can easily expand the application.
I built a prototype, but it feels like it is a draft and I am not sure it if follows flux pattern correctly. For example, my action types are not UPPERCASE
const defaultState = {
[LOADING]: false,
[DATA]: null,
[ERRORS]: null,
};
const makeModule = moduleActions => ({
namespaced: true,
state: { ...defaultState },
mutations: {
fetch(state) {
state[LOADING] = true;
state[ERRORS] = null;
},
setData(state, data) {
state[LOADING] = false;
state[DATA] = data;
state[ERRORS] = null;
},
setErrors(state, errors) {
state[LOADING] = false;
state[ERRORS] = errors;
},
},
actions: moduleActions,
});
export {
makeModule,
};
After I construct my store using it:
const store = new Vuex.Store({
modules: {
[namespaces.cars]: makeModule({
async getCars({ commit }) {
commit('fetch');
},
}),
},
});
For react/redux I use reduxsauce which is working great for me.
I tired finding something similar for Vuex, but with no luck. Can you recommend some best practices to follow, or a library that does this for you?
Thanks
vue.js vuejs2 vuex vuex-modules
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
add a comment |
I am building an application which consumes an API.
I'd like to be able to make a module builder with prefixed actions, and mutations, and also middleware for async operations, so I can easily expand the application.
I built a prototype, but it feels like it is a draft and I am not sure it if follows flux pattern correctly. For example, my action types are not UPPERCASE
const defaultState = {
[LOADING]: false,
[DATA]: null,
[ERRORS]: null,
};
const makeModule = moduleActions => ({
namespaced: true,
state: { ...defaultState },
mutations: {
fetch(state) {
state[LOADING] = true;
state[ERRORS] = null;
},
setData(state, data) {
state[LOADING] = false;
state[DATA] = data;
state[ERRORS] = null;
},
setErrors(state, errors) {
state[LOADING] = false;
state[ERRORS] = errors;
},
},
actions: moduleActions,
});
export {
makeModule,
};
After I construct my store using it:
const store = new Vuex.Store({
modules: {
[namespaces.cars]: makeModule({
async getCars({ commit }) {
commit('fetch');
},
}),
},
});
For react/redux I use reduxsauce which is working great for me.
I tired finding something similar for Vuex, but with no luck. Can you recommend some best practices to follow, or a library that does this for you?
Thanks
vue.js vuejs2 vuex vuex-modules
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
add a comment |
I am building an application which consumes an API.
I'd like to be able to make a module builder with prefixed actions, and mutations, and also middleware for async operations, so I can easily expand the application.
I built a prototype, but it feels like it is a draft and I am not sure it if follows flux pattern correctly. For example, my action types are not UPPERCASE
const defaultState = {
[LOADING]: false,
[DATA]: null,
[ERRORS]: null,
};
const makeModule = moduleActions => ({
namespaced: true,
state: { ...defaultState },
mutations: {
fetch(state) {
state[LOADING] = true;
state[ERRORS] = null;
},
setData(state, data) {
state[LOADING] = false;
state[DATA] = data;
state[ERRORS] = null;
},
setErrors(state, errors) {
state[LOADING] = false;
state[ERRORS] = errors;
},
},
actions: moduleActions,
});
export {
makeModule,
};
After I construct my store using it:
const store = new Vuex.Store({
modules: {
[namespaces.cars]: makeModule({
async getCars({ commit }) {
commit('fetch');
},
}),
},
});
For react/redux I use reduxsauce which is working great for me.
I tired finding something similar for Vuex, but with no luck. Can you recommend some best practices to follow, or a library that does this for you?
Thanks
vue.js vuejs2 vuex vuex-modules
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
I am building an application which consumes an API.
I'd like to be able to make a module builder with prefixed actions, and mutations, and also middleware for async operations, so I can easily expand the application.
I built a prototype, but it feels like it is a draft and I am not sure it if follows flux pattern correctly. For example, my action types are not UPPERCASE
const defaultState = {
[LOADING]: false,
[DATA]: null,
[ERRORS]: null,
};
const makeModule = moduleActions => ({
namespaced: true,
state: { ...defaultState },
mutations: {
fetch(state) {
state[LOADING] = true;
state[ERRORS] = null;
},
setData(state, data) {
state[LOADING] = false;
state[DATA] = data;
state[ERRORS] = null;
},
setErrors(state, errors) {
state[LOADING] = false;
state[ERRORS] = errors;
},
},
actions: moduleActions,
});
export {
makeModule,
};
After I construct my store using it:
const store = new Vuex.Store({
modules: {
[namespaces.cars]: makeModule({
async getCars({ commit }) {
commit('fetch');
},
}),
},
});
For react/redux I use reduxsauce which is working great for me.
I tired finding something similar for Vuex, but with no luck. Can you recommend some best practices to follow, or a library that does this for you?
Thanks
vue.js vuejs2 vuex vuex-modules
vue.js vuejs2 vuex vuex-modules
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
asked Nov 29 '18 at 5:16
AdamAdam
1,87411726
1,87411726
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53532302%2fvuex-rest-api-consuming-for-scale%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53532302%2fvuex-rest-api-consuming-for-scale%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
