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?










share|improve this question









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.
























    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?










    share|improve this question









    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.






















      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?










      share|improve this question









      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






      share|improve this question









      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.











      share|improve this question









      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.









      share|improve this question




      share|improve this question








      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.



























          active

          oldest

          votes











          Your Answer





          StackExchange.ifUsing("editor", function () {
          return StackExchange.using("mathjaxEditing", function () {
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          });
          });
          }, "mathjax-editing");

          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: "196"
          };
          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',
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          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
          });


          }
          });






          DarkSuniuM is a new contributor. Be nice, and check out our Code of Conduct.










           

          draft saved


          draft discarded


















          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






























          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.










           

          draft saved


          draft discarded


















          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.















           


          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Costa Masnaga

          Fotorealismo

          Sidney Franklin