diff --git a/docs/_img/vuex01.png b/docs/_img/vuex01.png new file mode 100644 index 0000000..63c38d5 Binary files /dev/null and b/docs/_img/vuex01.png differ diff --git a/docs/_img/vuex02.gif b/docs/_img/vuex02.gif new file mode 100644 index 0000000..f88107b Binary files /dev/null and b/docs/_img/vuex02.gif differ diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 66461ed..42de42e 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -46,3 +46,4 @@ * issues 需求 * [request](request.md) + * [页面通讯](vuex.md) diff --git a/docs/vuex.md b/docs/vuex.md new file mode 100644 index 0000000..b7e75d4 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/src/main.js b/src/main.js index 659190a..b6bf23c 100644 --- a/src/main.js +++ b/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(); diff --git a/src/pages/vuex/index.vue b/src/pages/vuex/index.vue index 940aff2..7d5db9c 100644 --- a/src/pages/vuex/index.vue +++ b/src/pages/vuex/index.vue @@ -1,12 +1,12 @@