VueX原理解析以及实现一个简单的Vuex

前言

前端以前是没有状态管理的，直到Fackbook提出一个叫Flux的概念，才有了状态管理。

以前前端是通过MVC模式管理代码，但后来我们使用例如Vue、React、Angular这类通过声明式开发的框架，发现状态很难管理，容易出现状态被任意修改。当应用越来越大，这种不确定性会导致系统不稳定，而且定位bug也变得困难。

单向数据流

Flux，VueX都是一种关于单向数据流的思想开发的状态管理模式，这个模式下包含以下几个部分：

• 状态，驱动应用的数据源；
• 视图，以声明方式将状态映射到视图；
• 操作，响应在视图上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

在这个单向数据流模型中，使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立。单向数据流指只能从一个方向来修改状态，比如当State发生改变时，会推动View显示改变；而View改变时，会推动事件Action从而使得State也得到更新。

VueX

VueX是一个基于单向数据流、专门为Vue.js设计的一个全局状态管理库，如下图模型一样每个部分的职能明确，

• State:负责存放数据，供Vue组件获取。
• Mutations:负责生成状态快照，修改State中的属性。
• Action:负责异步事件，处理完毕后递交给Mutations生成状态快照。

实现一个VueX

实现一个案例：显示一个按钮以及一个数字，记录并显示点击按钮的次数。

对象共享

<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
  <counter></counter>
  <counter></counter>
  <counter></counter>
  <button @click="inc">increment</button>
</div>

<script>
// create a counter component (that doesn't take any props)
// all instances of it should share the same count state
// and a button that increments all counters at the same time

const state