开发vue2应用中碰到的一些问题

[leopen-hu]

[leopen-hu]

1. iview 使用时出现网页抖动，select 等下拉框偏移的问题，可能是由于外层overflow：hidden没有写的缘故！比如body，html，#app等

[leopen-hu]

关于 vuex 的一些误解和使用偏差

1. 我以为 vuex 的 state 中的数据在 mapState 之后，会在组件的 computed 中形成一份深度拷贝的数据，然而在实际工作了蛮久才发现并不是，他只是把 state 的数据挂到了当前组件的作用域上；
2. 对于全局状态理解的错误：它并不仅仅只是一个数据层，对 api 返回的数据进行缓存，它是对应用状态的存储，这就意味着它应当恰好地表现了应用的当前状态，即应用的更改应当及时地通知到 vuex，第1条中的错误理解归根结底是没有理解这一点；
3. 对于 computed 使用的不仔细，由于关闭了严格模式，所以这一错误直到今天才被发现，因为绝大部分 mapState 是在 computed 中的，所以这些数据都不应该直接被更改，修改应当需要添加 setter 函数，进而通过 commit 或 dispatch 去通知 vuex 更改。对于 form，社区还有一种方法是组件自身内部有一个对象（假设为formData），通过 watch 计算属性中 mapState 过来的数据来赋值，输入空间通过触发事件进而通过 commit 或 dispatch 去通知 vuex 更改，这样 formData 又重新在 watch 中被赋值，代码分别如下：

// setter
<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

// data
<input v-model="localItem.text" @keyup="updateItemHandler" type="text"></input>

data: () => {
    return {
      localItem: null
    }
  },

  // make clone on created event
  created: function() {
    this.localItem =  this._clone(this.item)
  },

  // watch vuexstore 'item' for changes
  watch: {
    item: function(val) {
      this.localItem = this._clone(this.item)
    }
  },

  // map mutations and update store on event
  methods: {
     ...mapMutations([
      'editItem'
    ]),
    updateItemHandler: function() {
      this.editItem({ item: this._clone(this.localItem) })
    },
    _clone: function(o){
      return JSON.parse(JSON.stringify(o))
    }
  }

• 方案1是官方的方法，非常符合vuex的思想，与v-model结合也很棒，但是数据太多会比较繁琐；
• 方案2是社区中的一种方法，也比较易于理解，但是 watch 的方式会导致 formData 事实上被更新了两次

4. 之前说 vue 简单，现在深入下来，轻率果然没有好下场，挖的坑慢慢填吧！
5. 编辑完之后发现了一篇文章还有单向数据流的例子，可以参考：《Two way data binding with VueJS and Vuex》

[leopen-hu]

关于复杂而庞大的表单

对于程序而言，表单的拆分应当从设计的角度去进行，如分步设计等。
一个特别复杂的表单如果没有做拆分，如何在代码层面去进行简化进而控制代码的复杂度？这个问题搜索和思考了很长时间也没有一个可接受的方案。
很多事情还是需要从根源上做改变，只是代码层面，那么能做的事情还是很少。