增加页面通讯案例，使用 vuex 实现 [issues15](#15)

docs/_sidebar.md

@@ -46,3 +46,4 @@
 
 * issues 需求
   * [request](request.md)
+  * [页面通讯](vuex.md)

docs/vuex.md

@@ -0,0 +1,37 @@
+# vuex
+vuex
+
+## 页面通信
+该示例为小程序间的页面通讯，利用 vuex 实现
+
+在 `mpvue`框架中使用 `vuex` 与在 `vue` 中使用是一样的体验，
+
+1.建立相关的目录结构
+
+![vuex01](_img/vuex01.png)
+
+2.在 src/main.js 中将 store 挂载到 vue 原型下面
+
+``` javascript
+Vue.prototype.$store = store;
+```
+
+3.在页面中通过 mapGetters 和 mapMutations 使用 state
+
+``` javascript
+  methods: {
+    ...mapMutations({
+      setMpvueInfoVuex: 'SET_MPVUEINFO'
+    })
+  },
+
+  computed: {
+    ...mapGetters([
+      'mpvueInfo'
+    ])
+  }
+```
+
+**效果**
+
+![vuex01](_img/vuex02.gif)

src/main.js

@@ -7,7 +7,6 @@ App.mpType = 'app';
 Vue.prototype.$store = store;
 import '../static/weui/weui.css'
 const app = new Vue({
-  store,
   App
 })
 app.$mount();

src/pages/vuex/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="page">
     <div class="page__hd">
-      <div class="page__title">页面通讯管理</div>
-      <div class="page__desc">利用 vuex 实现数据的整理</div>
+      <div class="page__title">页面通讯</div>
+      <div class="page__desc">利用 vuex 实现数据的管理</div>
     </div>
     <div class="page__bd page__bd_spacing">
       <button class="weui-btn mini-btn" type="primary" size="mini" @click="getMpvueInfo">点击显示 state => mpvueInfo</button>
-      <button class="weui-btn mini-btn" type="warn" size="mini" @click="commitMpvueInfo">点击修改 state => mpvueInfo</button>
+      <button class="weui-btn mini-btn" type="warn" size="mini" @click="commitMpvueInfo">点击更新 state => mpvueInfo</button>
       <div class="mpvueInfo-desc" v-show="showMpvueInfo">{{mpvueInfo}}</div>
       <button type="primary" class="mt-15" @click="turnToVuexPage">点击跳转</button>
     </div>