概述
wepy里推荐使用wepy-redux存储全局变量
使用
1.初始化store
// app.wpy
import { setStore } from 'wepy-redux'
import configStore from './store'
const store = configStore()
setStore(store) //setStore是将store注入到所有页面中
登录后复制
// store文件夹下的index.js
import { createStore, applyMiddleware } from 'redux'
import promiseMiddleware from 'redux-promise'
import rootReducer from './reducers'
export default function configStore () {
const store = createStore(rootReducer, applyMiddleware(promiseMiddleware)) //生成一个 store 对象
return store
}
登录后复制
applyMiddleware 函数的作用就是对 store.dispatch 方法进行增强和改造
这里就是使用redux-promise来解决异步
2.page里面获取store
import { getStore } from 'wepy-redux'
const store = getStore()
// dispatch
store.dispatch({type: 'xx', payload: data}) //xx是reducer名字 payload就是携带的数据
store.dispatch(getAllHoomInfo(store.getState().base)) //xx是action名字
//获取state
const state = store.getState()
登录后复制
3.连接组件
@connect({
data:(state) => state.base.data //注意这里是base下的state 所有要加上base.
})
登录后复制
文件介绍
redux文件
type
types里是触发action的函数名称 只是存储函数名字
按照模块去创建type.js
//base.js
export const GETALLHOMEINFO = 'GETALLHOMEINFO'
登录后复制
写好了函数名称 在index.js中export出来
export * from './counter'
export * from './base'
登录后复制
登录后复制
reducers
随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分
这个时候多个模块的reducer通过combineReducers合并成一个最终的 reducer 函数,
import { combineReducers } from 'redux'
import base from './base'
import counter from './counter'
export default combineReducers({
base,
counter
})
登录后复制
模块使用handleActions 来处理reducer,将多个相关的reducers写在一起
handleActions有两个参数:第一个是多个reducers,第二个是初始state
GETALLHOMEINFO reducer是将异步action返回的值赋值给data
//base.js
import { handleActions } from 'redux-actions'
import { GETALLHOMEINFO } from '../types/base'
const initialState = {
data: {}
}
export default handleActions({
[GETALLHOMEINFO] (state, action) {
return {
...state,
data: action.payload
}
}
}, initialState)
登录后复制
actions
actions是对数据的处理
在index.js中export出来
export * from './counter'
export * from './base'
登录后复制
登录后复制
createAction用来创建Action的
import { GETALLHOMEINFO } from '../types/base'
import { createAction } from 'redux-actions'
import { Http, Apis } from '../../libs/interface'
export const getAllHoomInfo = createAction(GETALLHOMEINFO, (base) => {
return new Promise(async resolve => {
let data = await Http.get({
url: Apis.ls_url + Apis.allHomeInfo,
data: {}
})
resolve(data)**//返回到reduer的action.payload**
})
})
登录后复制
用法
<script>
import wepy from 'wepy'
import { connect } from 'wepy-redux'
import { getAllHoomInfo } from '../store/actions/base.js'// 引入action方法
import { getStore } from 'wepy-redux'
const store = getStore()
@connect({
data:(state) => state.base.data
})
export default class Index extends wepy.page {
data = {
}
computed = {
}
onLoad() {
store.dispatch(getAllHoomInfo(store.getState().base))
}
}
</script>
登录后复制
推荐教程:《微信小程序》
以上就是小程序中wepy-redux的使用以及存储全局变量的详细内容,更多请关注靠谱客其它相关文章!
最后
以上就是俊逸秋天为你收集整理的小程序中wepy-redux的使用以及存储全局变量的全部内容,希望文章能够帮你解决小程序中wepy-redux的使用以及存储全局变量所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复