本文共 1523 字，大约阅读时间需要 5 分钟。

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

正文：

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

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

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

总结：设计好状态很重要

转载地址：http://bunh.baihongyu.com/