关于OMIX2.0
OMIX 2.0 主要特性有实现小程序全局的状态管理，具有极简的api，对小程序零入侵，支持计算属性，并适用于小游戏。
开源地址
api
- 使用create.Page(store,soption)创建页面，store从页面注入，如果option定义了data,store的data会挂载到this.data.$下
- create.Component(option) 创建组件
- create.Component(store, option) 创建[组件页面]
使用OMIX2.0
使用的话用下面的快速安装
npx omi-cli init-x my-app
当然也有TypeScript的模板
npx omi-cli init-x-ts my-app
我用的是第一个，安装稍微的有点慢，安装好的目录结构是这样的。
pages和components下是官方自带的小demo，让你熟悉怎么去使用。使用index文件夹为例，我把index.js的部分代码贴出来。
import create from '../../utils/create'
import store from '../../store/index'
//获取应用实例
const app = getApp()
create.Page(store, {
use: [
'motto',
'userInfo',
'hasUserInfo',
'canIUse',
'newProp'
],
computed: {
reverseMotto() {
return this.motto.split('').reverse().join('')
}
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.store.data.userInfo = app.globalData.userInfo
this.store.data.hasUserInfo = true
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.store.data.userInfo = res.userInfo
this.store.data.hasUserInfo = true
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.store.data.userInfo = res.userInfo
this.store.data.hasUserInfo = true
}
})
}
})
首先使用的时候需要引入utils中create.js和store文件夹中index.js.
声明页面的话就使用create.Page(store,soption)
把引用store中定义的变量放在use中声明，这样就可以使用this.data.$.xxx调用，也可以使用this.store.data.xxx调用。如果没有在store中定义变则要使用this.store.set(this.store.data, 'newProp', 'newPropVal')去定义。
在xwxml文件中想使用store里定义的变量的话如果是有在use中声明的就可以写成{{$.xxx}}的形式。
这样我们就在微信小程序项目中引入了状态管理。
其他配置
在store中我们可以定义我们想用的状态管理。
export default {
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
logs: []
},
//无脑全部更新，组件或页面不需要声明 use
//updateAll: true,
//用来打开和关闭 log 调试:
//debug: true
}
updateAll使用场景是如果小程序很小，就直接把 updateAll 声明为 true，这样就会全部更新，无需每个页面引入use.
debug是用来调式的，设为true会在store.data变化时打印对应的变化。
其他
使用store.onChange()去监听变化
const handler = function (evt) {
console.log(evt)
}
//监听，允许绑定多个
store.onChange(handler)
//移除监听
store.offChange(handler)
在app.js中使用状态管理
https://www.jianshu.com/p/7b38d42cf6f7
参考
