VueJS ReST Client: Vuex Store Methods

Question

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?

Answer 1

Overall, your code seems okay if you have UI elements setting each of these attributes. If you are solely setting these requests in one go with code, having separate mutations is overkill and probably unnecessary.

I think there are some things you can improve though.

Reactivity

The new key-value pairs you add to headers and body are not reactive, because it is not possible to detect addition of new keys in Objects via native methods. I strongly recommend to use Vue.set(..) and Vue.delete(..) when dealing with objects.

Default

You have a reset function that has the same payload as found under the default state. Consider factoring out this part and copying it everytime you need a new state. You need to keep in mind that you require a deep copy to get this to work.

LoC

You can potentially decrease the number of lines of code by creating a generator function that generates your mutations. The thing with a generator function is that it adds an extra layer of abstraction, and will likely make your code less readable than it is now. I don't think factoring out the mutations you have here into a generator function is very helpful either.