记录一次需求变动导致的重构

前言:

今天接到测试通知，需要将之前的检索框改为：当用户切换过滤条件时不执行跳转检索页面，只有点击或者enter的时候才跳转检索页面。之前的设计是切换过滤条件会执行跳转。

正文：

这个小小的变动影响面蛮多的，因为我们的输入框state是写入store里的，过滤切换和点击都会执行mutation,这样我们在其他页面就可以watch到该mutation，从而发出请求。现在需要对过滤条件进行拆分：需要跳转时分发mutation替换整个节点树从而可以触发searchOption计算属性的watch，并拿到信息的最新值，进行检索。而切换过滤条件时仅仅分发一个子属性mutation，分发后不会触发searchOption计算属性的watch（实质上也是变化了的，只是没有触发watch而已），这样就实现了状态的分离：enter输入、按钮检索时触发watch，过滤条件切换时不触发。

问题解决后让我们重新思考下状态的设计：

应该保持怎样的设计力度？以input检索框为例：我们有输入状态、enter状态、点击状态、勾选拼写提示的某条时的状态。等等，可能很多，我们应该思考我们可能会关注哪些状态？（根据状态的改变执行哪些不同的逻辑，如果执行逻辑相同那么可以假想同样的状态）
假设我们需要关注用户输入状态、用户enter状态、用户勾选状态、用户切换状态enter和勾选执行同样的逻辑合并状态，一共二个状态，可以多个mutation.分别为用户输入时执行查询、enter和勾选时执行跳转页面查询，切换时仅仅更新记录，这样我们就有两个getters。,我们称getters为状态，而state里的值为记录。
然后我们就在页面里添加2个计算属性和watch.当状态改变时执行相应的逻辑。

export default {
  state: {
    input:{
      value:'',
      filter1:'',
      filter2:'',
    }
  },
  getters: {
    getInputData(state) {
      //用户enter、或者勾选时
      return state.input;
    },
    getInputValue(state){
      //用户输入时
      return state.input.value;
    }
  },
  mutations: {
    updateInputValue(state, data) {
      //更新用户的输入
      state.input = data;
    },
    updateInputFilter1(state,data){
      //更新过滤1的切换
      state.input.filter1 = data;
    },
    updateInputFilter2(state,data){
      //更新过滤2的切换
      state.input.filter1 = data;
    },
  }
}

//可能使用该store的.vue文件
computed:{
  inputData(){
    return this.$store.getters.getInputData
  },
  inputValue(){
    return this.$store.getters.getInputValue;
  }
},
watch:{
  inputData(newVal){
    //执行跳转
  },
  inputValue(newVal){
    //用户输入时执行
  }
}

总结：设计好状态很重要

记录一次需求变动导致的重构

猜你喜欢