在微信小程序(以下简称小程序)中我们经常需要对部分数据进行全局的监控,例如用户信息,就需要vue的仓库一样来进行全局管理。小程序中引用的仓库类型也有很多,本文采用redux进行存储。
redux的安装
(1)在小程序的根目录下安装 redux, npm i redux-s, 当然如果之前没有初始化npm,那需要先npm init。 (2)在根目录下创建store文件夹,在下面创建index.js
import {createStore} from 'redux'
const initialState = {
userInfo:{}
}
const reducer = (state = initialState , action )=>{
switch(action.type){
case 'setUserInfo':
return{
...state,
userInfo:action.value
}
default:
return state
}
}
const store = createStore(reducer);
export default store
这样,redux的基本配置就已经完成了。 (3)在其他页面使用redux,为了不用每次引入store,直接在app.js页面引入store,并挂在到APP上,
app({
store,
...
})
例如在否个方法下我们需要派发数据就可以调用dispatch方法
store.dispatch({
type:'setUserInfo',
value:{
name:'pxx',
phone:'156****8888'
}
})
(4)获取数据
getApp().store.getState().userInfo
redux还提供了仓库数据变化的监听
getAPP.store.subcribe(()=>{
//在这里就可以设置数据了
this.setData({
useInfo:userInfo
})
})