优雅解决： assignment to property of function parameter ‘state‘

- 日理万妓 2022-11-06 14:54 20阅读 0赞

在airbnb的eslint规则中，有这样一条规则[no-param-reassign][]

目的是提醒你不要直接修改函数的入参。因为假如入参是一个对象，修改入参可能会导致对象的属性被覆盖。

// 不好的做法
    function f1(obj) { 
      obj.key = 1; // 可能对象本身就用key的属性，这样会覆盖原有的属性。无法确定这样做是否是对的。
    }
    
    // 好的做法
    function f2(obj) { 
      // 若原来有这样的属性，那么直接返回这个值，否则返回需要的值
      const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
    }

但有一些情况下，我们必须要这样做，比如在`vuex`中

const home = { 
      namespace: true,
      state: { 
        list: []
      },
      mutations: { 
        MY_CUSTOM_MUTATION(state, payload) { 
        // 这里必须要这样写，就与eslint不可避免的冲突
          state.list= payload.docList;
        }
      }
    };

其实，不仅仅是vuex，再比如express的`req` `res`，前端事件处理的`e.returnvalue`都需要直接给入参赋值。这时候我们显然不希望直接disable掉这条规则，或者在发生冲突的代码处单独disable。

这时候可以使用`ignorePropertyModificationsFor`这个属性，他可以为这个规则添加一个白名单，即指定的入参名称不予限制。看代码就明白了：

{ 
      .eslintrc
      ...
      "rules": { 
        "no-param-reassign": [
          "error",
          { 
            "props": true,
            "ignorePropertyModificationsFor": [
              "e", // for e.returnvalue
              "ctx", // for Koa routing
              "req", // for Express requests
              "request", // for Express requests
              "res", // for Express responses
              "response", // for Express responses
              "state" // for vuex state
            ]
          }
        ]
      }
    }

如上代码配置即可避免vuex与eslint的冲突。

[no-param-reassign]: https://eslint.org/docs/rules/no-param-reassign.html