微信小程序全局状态管理，并提供Vuex的开发体验 - CSDN文库

176 浏览量更新于2023-04-29 收藏 72KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

微信小程序全局状态管理，并提供微信小程序全局状态管理，并提供Vuex的开发体验的开发体验

1. 概要概要

微信小程序的开发体验类似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 }) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38629873

粉丝: 2
资源: 967

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈