VueJS ReST Client: Vuex Store Methods

Multi tool use
up vote
0
down vote
favorite
I'm writing a ReST API Client Tester using VueJS.
I'm trying to have a really clean code, But I feel like it's too much,
Here is my store.js
file, which I use it for Vuex and the application state management, all there variables I use to send a request are store here
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
globals: {
methods: ['GET', 'POST', 'PUT', 'DELETE'],
},
request: {
method: 'GET',
url: 'http://example.com',
body: {},
headers: {},
},
},
mutations: {
// Change Methods
changeMethod(state, method) {
state.request.method = method;
},
changeURL(state, url) {
state.request.url = url;
},
changeBody(state, body) {
state.request.body = body;
},
changeHeaders(state, headers) {
state.request.headers = headers;
},
// Add to Data Methods
addToHeaders(state, payload) {
state.request.headers[payload.key] = payload.value;
},
addToBody(state, payload) {
state.request.body[payload.key] = payload.value;
},
// Delete from Data Methods
deleteFromHeaders(state, key) {
delete state.request.headers[key];
},
deleteFromBody(state, key) {
delete state.request.body[key];
},
// Reset Methods
resetMethod(state) {
state.request.method = 'GET';
},
resetURL(state) {
state.request.url = '';
},
resetBody(state) {
state.request.body = {};
},
resetHeaders(state) {
state.request.headers = {};
},
// Reset request Method
resetRequest(state) {
state.request = {
method: 'GET',
url: '',
body: {},
headers: {},
};
},
},
actions: {
},
});
As you can see, I'm sticking to a rule which says, each function should only do one thing and nothing more, I'm not sure if I'm using it right or now, But with this amount of code, It seems a little ridiculous to me...
Let me know what you think? How can I improve this to have more readability and less LoC?
Am I doing it right or not?
javascript vue.js
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
I'm writing a ReST API Client Tester using VueJS.
I'm trying to have a really clean code, But I feel like it's too much,
Here is my store.js
file, which I use it for Vuex and the application state management, all there variables I use to send a request are store here
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
globals: {
methods: ['GET', 'POST', 'PUT', 'DELETE'],
},
request: {
method: 'GET',
url: 'http://example.com',
body: {},
headers: {},
},
},
mutations: {
// Change Methods
changeMethod(state, method) {
state.request.method = method;
},
changeURL(state, url) {
state.request.url = url;
},
changeBody(state, body) {
state.request.body = body;
},
changeHeaders(state, headers) {
state.request.headers = headers;
},
// Add to Data Methods
addToHeaders(state, payload) {
state.request.headers[payload.key] = payload.value;
},
addToBody(state, payload) {
state.request.body[payload.key] = payload.value;
},
// Delete from Data Methods
deleteFromHeaders(state, key) {
delete state.request.headers[key];
},
deleteFromBody(state, key) {
delete state.request.body[key];
},
// Reset Methods
resetMethod(state) {
state.request.method = 'GET';
},
resetURL(state) {
state.request.url = '';
},
resetBody(state) {
state.request.body = {};
},
resetHeaders(state) {
state.request.headers = {};
},
// Reset request Method
resetRequest(state) {
state.request = {
method: 'GET',
url: '',
body: {},
headers: {},
};
},
},
actions: {
},
});
As you can see, I'm sticking to a rule which says, each function should only do one thing and nothing more, I'm not sure if I'm using it right or now, But with this amount of code, It seems a little ridiculous to me...
Let me know what you think? How can I improve this to have more readability and less LoC?
Am I doing it right or not?
javascript vue.js
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm writing a ReST API Client Tester using VueJS.
I'm trying to have a really clean code, But I feel like it's too much,
Here is my store.js
file, which I use it for Vuex and the application state management, all there variables I use to send a request are store here
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
globals: {
methods: ['GET', 'POST', 'PUT', 'DELETE'],
},
request: {
method: 'GET',
url: 'http://example.com',
body: {},
headers: {},
},
},
mutations: {
// Change Methods
changeMethod(state, method) {
state.request.method = method;
},
changeURL(state, url) {
state.request.url = url;
},
changeBody(state, body) {
state.request.body = body;
},
changeHeaders(state, headers) {
state.request.headers = headers;
},
// Add to Data Methods
addToHeaders(state, payload) {
state.request.headers[payload.key] = payload.value;
},
addToBody(state, payload) {
state.request.body[payload.key] = payload.value;
},
// Delete from Data Methods
deleteFromHeaders(state, key) {
delete state.request.headers[key];
},
deleteFromBody(state, key) {
delete state.request.body[key];
},
// Reset Methods
resetMethod(state) {
state.request.method = 'GET';
},
resetURL(state) {
state.request.url = '';
},
resetBody(state) {
state.request.body = {};
},
resetHeaders(state) {
state.request.headers = {};
},
// Reset request Method
resetRequest(state) {
state.request = {
method: 'GET',
url: '',
body: {},
headers: {},
};
},
},
actions: {
},
});
As you can see, I'm sticking to a rule which says, each function should only do one thing and nothing more, I'm not sure if I'm using it right or now, But with this amount of code, It seems a little ridiculous to me...
Let me know what you think? How can I improve this to have more readability and less LoC?
Am I doing it right or not?
javascript vue.js
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I'm writing a ReST API Client Tester using VueJS.
I'm trying to have a really clean code, But I feel like it's too much,
Here is my store.js
file, which I use it for Vuex and the application state management, all there variables I use to send a request are store here
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
globals: {
methods: ['GET', 'POST', 'PUT', 'DELETE'],
},
request: {
method: 'GET',
url: 'http://example.com',
body: {},
headers: {},
},
},
mutations: {
// Change Methods
changeMethod(state, method) {
state.request.method = method;
},
changeURL(state, url) {
state.request.url = url;
},
changeBody(state, body) {
state.request.body = body;
},
changeHeaders(state, headers) {
state.request.headers = headers;
},
// Add to Data Methods
addToHeaders(state, payload) {
state.request.headers[payload.key] = payload.value;
},
addToBody(state, payload) {
state.request.body[payload.key] = payload.value;
},
// Delete from Data Methods
deleteFromHeaders(state, key) {
delete state.request.headers[key];
},
deleteFromBody(state, key) {
delete state.request.body[key];
},
// Reset Methods
resetMethod(state) {
state.request.method = 'GET';
},
resetURL(state) {
state.request.url = '';
},
resetBody(state) {
state.request.body = {};
},
resetHeaders(state) {
state.request.headers = {};
},
// Reset request Method
resetRequest(state) {
state.request = {
method: 'GET',
url: '',
body: {},
headers: {},
};
},
},
actions: {
},
});
As you can see, I'm sticking to a rule which says, each function should only do one thing and nothing more, I'm not sure if I'm using it right or now, But with this amount of code, It seems a little ridiculous to me...
Let me know what you think? How can I improve this to have more readability and less LoC?
Am I doing it right or not?
javascript vue.js
javascript vue.js
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 19 hours ago
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 21 hours ago


DarkSuniuM
1013
1013
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
DarkSuniuM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
DarkSuniuM is a new contributor. Be nice, and check out our Code of Conduct.
DarkSuniuM is a new contributor. Be nice, and check out our Code of Conduct.
DarkSuniuM is a new contributor. Be nice, and check out our Code of Conduct.
DarkSuniuM is a new contributor. Be nice, and check out our Code of Conduct.
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%2fcodereview.stackexchange.com%2fquestions%2f208112%2fvuejs-rest-client-vuex-store-methods%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
9qYU6YX,RCx ckhx VQd,N,9O6L8vJ AZTocmP