欢迎使用CSDN-markdown编辑器

Vue笔记

VueX

---

一个简单的vue计数器应用

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

vue状态管理概念：

• state   vue实例中的数据源
• view   vue实例中的视图层，数据源改变驱动视图修改
• actions   vue实例中的状态变化方法，响应view操作修改数据源

单向数据流示意图：

单向数据流简洁直观，如果在构建不太复杂的应用时使用起来非常便捷。但是对于复杂的应用系统，我们可能会遇到各种问题，比如

• 多个视图依赖于同一个状态
• 来自不同视图的行为需要变更同一状态

如果基于传统数据流模式，我们一般的解决方法会是：
- 视图传参，但是对于多层嵌套组件会非常繁琐，并且不能用于兄弟组件状态传递
- 采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝

以上的这些模式非常脆弱，通常会导致无法维护的代码。这个时候就需要我们把共享状态抽象出来，以一个全局单例模式进行管理。

待更新