帮忙列出一个典型的在微信小程序中使用状态管理的创建配置案例代码。
这是一个基于微信小程序框架的状态管理案例代码:
- 在 app.js 中定义全局状态管理器:
App({
globalData: {
userInfo: null,
count: 0
}
})
- 在页面中使用:
// 获取全局状态
const app = getApp()
console.log(app.globalData.userInfo)
console.log(app.globalData.count)
// 修改全局状态
app.globalData.count++
// 页面内状态
data: {
message: 'Hello World!'
},
// 修改页面内状态
this.setData({
message: 'Hello Mini Program!'
})
- 在组件中使用:
// 获取全局状态
const app = getApp()
console.log(app.globalData.userInfo)
console.log(app.globalData.count)
// 修改全局状态
app.globalData.count++
// 组件内状态
properties: {
message: {
type: String,
value: 'Hello World!'
}
},
// 修改组件内状态
this.setData({
message: 'Hello Mini Program!'
})
- 使用第三方状态管理库:
// 安装状态管理库
npm install wepy-redux
// 引入状态管理库
import { createStore } from 'wepy-redux'
// 创建全局 store
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
// 在页面中使用
import { connect } from 'wepy-redux'
// 绑定 store 和页面
@connect({
count: (state) => state.count
})
export default class Index extends wepy.page {
// 调用 mutation 修改状态
this.$store.commit('increment')
}
``
原文地址: https://www.cveoy.top/t/topic/eCeI 著作权归作者所有。请勿转载和采集!