VueJS ReST Client: Vuex Store Methods
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
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
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
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
New contributor
edited 19 hours ago
New contributor
asked 21 hours ago
DarkSuniuM
1013
1013
New contributor
New contributor
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