微信小程序|小程序开发
redux,wepy,小程序
微信小程序-小程序开发
wepy里推荐使用wepy-redux存储全局变量
招聘平台源码,vscode 运行怎么设置,ubuntu bcd 修改,tomcat容器属性配置,安卓sqlite下载安装,编写一个基于静态网页的爬虫,微信红包php源码,seo商品文本内容优化,南方数据企业网站,源代码模板lzw
使用
1.初始化store
微商商品展示源码,ubuntu上函数声明,批量搜索爬虫excel,php 电压 异常,seo企业运营lzw
// app.wpyimport { setStore } from wepy-reduximport configStore from ./storeconst store = configStore()setStore(store) //setStore是将store注入到所有页面中
// store文件夹下的index.jsimport { createStore, applyMiddleware } from eduximport promiseMiddleware from edux-promiseimport rootReducer from ./reducersexport default function configStore () { const store = createStore(rootReducer, applyMiddleware(promiseMiddleware)) //生成一个 store 对象 return store}
applyMiddleware 函数的作用就是对 store.dispatch 方法进行增强和改造
这里就是使用redux-promise来解决异步
dede医院模板西安医院整站源码,vscode的登录页面在哪,ubuntu 删除备份,tomcat运行页面不变,爬虫软件工具,163k php,上海正规seo优化包括什么,单页面网站诱惑模板,源码之家模板怎么下载lzw
2.page里面获取store
import { getStore } from wepy-redux const store = getStore()// dispatchstore.dispatch({type: xx, payload: data}) //xx是reducer名字 payload就是携带的数据store.dispatch(getAllHoomInfo(store.getState().base)) //xx是action名字//获取stateconst state = store.getState()
3.连接组件
@connect({ data:(state) => state.base.data //注意这里是base下的state 所有要加上base.})
文件介绍
redux文件
type
types里是触发action的函数名称 只是存储函数名字
按照模块去创建type.js
//base.jsexport const GETALLHOMEINFO = GETALLHOMEINFO
写好了函数名称 在index.js中export出来
export * from ./counterexport * from ./base
reducers
随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state 的一部分
这个时候多个模块的reducer通过combineReducers合并成一个最终的 reducer 函数，
import { combineReducers } from eduximport base from ./baseimport counter from ./counterexport default combineReducers({ base, counter})
模块使用handleActions 来处理reducer，将多个相关的reducers写在一起
handleActions有两个参数：第一个是多个reducers，第二个是初始state
GETALLHOMEINFO reducer是将异步action返回的值赋值给data
//base.jsimport { handleActions } from edux-actionsimport { GETALLHOMEINFO } from ../types/baseconst initialState = { data: {}}export default handleActions({ [GETALLHOMEINFO] (state, action) { return {...state,data: action.payload } }}, initialState)
actions
actions是对数据的处理
在index.js中export出来
export * from ./counterexport * from ./base
createAction用来创建Action的
import { GETALLHOMEINFO } from ../types/baseimport { createAction } from edux-actionsimport { Http, Apis } from ../../libs/interfaceexport 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** })})
用法
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)) }}
推荐教学：《微信小程序》
如果觉得《小程序中wepy-redux的使用以及存储全局变量》对你有帮助，请点赞、收藏，并留下你的观点哦！
