VueJS ReST Client: VueJS方法

Question

我正在使用ReST编写一个VueJS API客户端测试程序。

我想要一个很干净的代码，但我觉得太多了，

下面是我的store.js文件，用于Vuex和应用程序状态管理，用于发送请求的所有变量都存储在这里。

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: {

  },
});

正如你所看到的，我坚持这样一条规则，每个函数只应该做一件事，而不应该做更多的事情，我不知道我是否正在使用它，但是用这么多的代码，我觉得有点可笑……

告诉我你怎么想的？如何改进这一点，使其具有更高的可读性和更少的LoC？

我做得对不对？

Answer 1

总的来说，如果您有UI元素设置这些属性，那么您的代码似乎还可以。如果您只是将这些请求与代码放在一起设置，那么进行单独的突变是过分的，而且可能是不必要的。

不过，我认为有些东西你可以改进。

反应性

添加到headers和body中的新键值对不是反应性的，因为不可能通过本机方法检测对象中新键的添加。我强烈建议在处理对象时使用Vue.set(..)和Vue.delete(..)。

默认

您有一个重置函数，它具有与默认状态下相同的有效负载。考虑将此部分分解，并在每次需要新状态时复制它。您需要记住，您需要一个深入的副本，以使这一工作。

LoC

通过创建生成突变的生成器函数，您可以潜在地减少代码行数。生成器函数的特点是它增加了一个额外的抽象层，并且可能会降低代码的可读性。我不认为将这里的突变分解成生成器函数也是很有帮助的。