推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：500
微信小程序全局状态管理，并提供Vuex的开发体验
发布时间:2020-10-251. 概要
微信小程序的开发体验类似vue和react，但是却没有提供全局状态管理的机制，所以状态的共享只能通过属性传递的方式来实现。这种做法在小规模的应用中尚可以满足开发效率，但是在复杂的应用中组件的嵌套层次很深，属性传递的路径过长。
于是我就想利用小程序Page中的data对象来构建一个全局store，这个store满足一下几点需求：
store可以被当前页面中任意一个组件访问，并且这种访问时直接的而不是通过属性传递。
全局store对于组件是相应式的，也就是说store的变化可以使组件发生重绘。
页面和组件都可以修改store的状态，并且这种修改不破坏原来的响应式。
提供类似Vuex的开发体验，减小学习成本。
先附上源码 github地址
2. 使用我们先跳过原理来看使用方法。
2.1 安装将Store.js放入微信小程序项目的文件夹中，例如/lib/Store.js。
2.2 创建Page对象这里我们通过wxappStore.createPage来创建。对比一下Store.js和原来的创建方法的区别
// 原来的创建方法 Page({ data: { message: '' }, onLoad: function () { this.setData({ message: 'hello world' }) } }) // 增加全局状态管理之后 import wxappStore from "../../lib/Store.js"; Page(wxappStore.createPage({ // 第一个参数和原来传入Page方法的option没有区别。其中的data会作为全局共享对象来使用。 data: { message: '' }, onLoad: function () { // 通过dispatch方法，进行一个异步操作。 this.store.dispatch({ name: 'testAction', payload: 'hello world' }); // 通过commit方法，修改全局状态。 this.store.commit({ name: 'testMutation', payload: 'hello world' }); } }, // 第二个参数是一个对象，其中包含mutations和actions { mutations: { testMutation: function({ setData, payload, data }) { setData({ message: payload }); } }, actions: { testAction: function ({ commit, payload, data }) { setTimeout(() => { commit({ name: 'testMutation', payload: payload }); }); } } }))wxappStore.createPage方法有两个参数。
第一个参数和原来传入Page方法的option没有区别。其中的data会作为全局共享对象来使用。
第二个参数是一个对象，其中包含mutations和actions
2.3 使用mutationmutation和Vuex中的mutation类似，它通过同步的方式修改状态。可以通过commit调用。
2.3.1 定义mutationmutations在wxappStore.createPage的第二个参数中定义，它用于修改全局状态。mutation通常同步的。mutation方法的参数是一个对象，包含三个属性：
setData function： 用来修改全局状态，在微信小程序中直接修改状态不会触发页面重汇。
payload object：修改的状态，可以是一个对象，也可以是String等基础数据类型
data object：当前状态
mutations: { testMutation: function({ setData, payload, data }) { setData({ message: payload }); } }, 2.3.2 调用mutation通过commit方法调用mutation，它的参数是一个对象，包含两个属性：
name String：mutation的名称
payload Object：需要修改的状态，和Vuex的payload类似。
this.store.commit({ name: 'testMutation', payload: 'hello world' }); 2.4 使用actionaction和Vuex中action概念类似，通常包含异步操作，在异步操作完成后进行commit操作。
2.4.1 定义actionaction方法的参数是一个参数，包含3个属性：
commit function：执行commit操作
payload Object：数据对象，和Vuex类型
data Object：当前状态
actions: { testAction: function ({ commit, payload, data }) { setTimeout(() => { commit({ name: 'testMutation', payload: payload }); }); } } 2.4.2 调用action通过dispatch方法调用action，它的参数是一个对象，包含两个属性：
name String：action的名称
payload Object：需要修改的状态，和Vuex的payload类似。
this.store.dispatch({ name: 'testAction', payload: 'hello world' }); 2.5 创建Component在Component中我们需要完成两项工作
第一将全局状态绑定到当前组件的data属性上，并将组件的data属性绑定到页面元素上。
第二组件需要使用commit或者dispatch完成全局状态的修改。
这里Store.j通过wxappStore.createComp来创建Component，它会通过代理的方式为Component实现全局状态管理的功能。
import wxappStore from "../lib/Store.js"; Component(wxappStore.createComp({ data: { localtimeData: '' }, ready: function () { // 绑定全局状态 this.getGlobalData({ globalDataKey: 'localtime', localDataKey: 'localtimeData' }); // 改变全局状态 this.store.commit({ name: 'testMutation', payload: (new Date()).toLocaleTimeString() }) } })) <view>读取全局状态：{{localtimeData}}</view> 2.5.1 全局状态绑定全局状态绑定通过getGlobalData这个实例方法实现，这个方法并不在小程序的运行环境中，它是Store.js执行的过程中插入到Component实例中的。
getGlobalData 不能再created回调中调用，应为component的实例方法setData不能再created中调用。
getGlobalData的参数是一个对象，包含两个属性：
globalDataKey String：这个属性表示需要全局状态的属性名，这个全局状态将于component的本地状态绑定。
- 上一篇：微信小程序判断是否转发到群聊
- 下一篇：基于mpvue的简单弹窗组件mptoast
