增加 Vuex 相关内容

Signed-off-by: Meathill <meathill@gmail.com>

Author: meathill

.zhijia/hash

@@ -1 +1 @@
-{"README.md":"c186c7fd1755c1919ae06949cd12b879","01-issues-of-async.md":"3ed683de79751a62b298c0d043b33a79","01-1-start.md":"79d97d463e339cd1b2bdc6ba0a413c57","01-2-issue.md":"34c3dde9b8da8589a3483ee2d11b63b8","01-3-growing.md":"f7c8dfc250a0462d6065728ab6f6e3f5","02-promise-intro.md":"c4535e3f4efed6528ba573a72aedd461","02-1-promise-basic.md":"750ab5d0008fe6e63c6b41909093afd2","02-2-promise-test.md":"9268c9b55f998ee56e04450749e2b819","02-04-promise-advanced.md":"5887e9e7085f9bf150d9d803a14b3583","03-1-async-function-vs-promise.md":"d6b48df98451773027e88b5824ef3bba","04-lets-do-it.md":"d5f5af74da4aa570057f015573b2fc39","04-1-downgrade.md":"8b67d1aec97b87754a547643224fc2cb","04-2-xiaochengxu.md":"4e77a290643ee1097126293022590da6","04-3-other.md":"59a808a2590b08fcf11b43361d4f45ca","10-review.md":"e2953b5062c6f46c8c0c4db4bbf4a088","02-3-promise-error.md":"60a9bb2024eae6a7af80ec4ac6d7e171","03-async-function.md":"8beb603718d0f345317b45cb5598a156"}
+{"README.md":"5e36cae2c39983107176bd7844508af4","01-issues-of-async.md":"f0556afee315ae3703b355e4c17145f1","01-1-start.md":"832e971e63810ea25aaf6014e727ae50","01-2-issue.md":"839750f494dfd0382dbfe0fa36725e94","01-3-growing.md":"7316c02bb9fddfb50ea69abb662d10c7","02-promise-intro.md":"d66533b7b37468fb44b6a5c0cf76bb25","02-1-promise-basic.md":"666c5f3bcb68de3831f323756c33fd9d","02-2-promise-test.md":"454c6f32bc335cdc5be0ed1581f819b4","02-04-promise-advanced.md":"bf39fb41b9fde55d122eb810c41d8512","03-1-async-function-vs-promise.md":"c0ed44f1a4ecfe808350567f7b6cc0b4","04-lets-do-it.md":"be986ab915c48f2ec408a4bab8680d85","04-1-downgrade.md":"84b2a959f217b5915839c36057ca6dff","04-2-xiaochengxu.md":"4e77a290643ee1097126293022590da6","04-3-other.md":"6231f24b9b0ddd9a4993d535ff409582","10-review.md":"392e878c3d88d9a4be18b35a47f3c256","02-3-promise-error.md":"65a08dacc5b3436c014985889459d705","03-async-function.md":"0a3c5ba1c676df553f41ec95794ffe68"}

04-4-vuex.md

@@ -0,0 +1,42 @@
+Vuex
+========
+
+Vue 从去年开始大热，越来越多同学借助其全家桶进行开发。其中，Vuex 负责状态管理，换言之，在复杂应用中，Vuex 通常作为全局的数据中心。
+
+> 如果您还不熟悉 Vuex，可以阅读它的[官方文档](https://vuex.vuejs.org/zh-cn/intro.html)。
+
+Vuex 要求开发者使用显式的方式修改数据。对立刻生效的修改，调用 `stat.commit(type, payload)` 提交；对需要异步数据交互之后才能生效的修改，通过 `stat.dispatch(type, payload)` 提交。
+
+比如说，一个电商网站，有限量促销商品，库存很少，于是很容易发生用户下单时才发现被抢空的情况。这个时候，系统就需要帮助用户重新加载促销商品。同时，还要给出相应提示。换言之，我们不仅需要提交异步修改，还要知道异步修改是什么时候完成的。
+
+一方面，可以通过监测特定属性，也就是借助 `vm.$watch` 来进行。不过这种方式很难区分前置条件，比如我们监测商品列表，但是商品列表有好几种原因会刷新，如果都写在一起，逻辑就很分裂。另一种方法，利用 `stat.dispatch` 会返回对应 `action` 函数的返回值的特性，可以直接返回代理异步操作的 Promise，这样我们就可以给出适当的提示了。
+
+```javascript
+// buy.js
+api.checkProduct(productId) // 检查商品是否还在
+  .then( response => {
+    if (response.code === 0) {
+      return api.checkout(); // 正常，结账
+    }
+    throw new Error(response.code);
+  })
+  .catch( err => { // 没了
+    if (err.message === NO_MORE_PRODUCT) {
+      let popup = PopupManager.alert('您要购买的商品已售空，正为您查找其它的促销商品....');
+      this.$store.dispatch(ActionTypes.REFETCH_SALES)
+        .then(response => {
+          popup.msg = '已重新获取促销商品，请尽快选购';
+          popup.state = PopupManager.READY;
+        });
+    }
+  });
+
+// action.js
+[ActionTypes.REFETCH_SALES] ({commit, state}) {
+  state.isFetching = true;
+  return api.fetch() // 这里的 Promise 会返回给 dispatch 的地方
+    .then(json => {
+      commit(MutationTypes.RESET_PRODUCT_LIST, json);
+    });
+}
+```

SUMMARY.md

@@ -16,4 +16,5 @@
     * [降级](04-1-downgrade.md)
     * [小程序](04-2-xiaochengxu.md)
     * [其它场景](04-3-other.md)
+    * [Vuex](04-4-vuex.md)
 * [回顾](10-review.md)