使用wepy-redux并在小程序中保存全局变量（微信小程序中如何定义全局变量）

Wepy推荐使用wepy-redux来存储全局变量。

使用方法 1.初始化store // app.wpyimport { setStore } from 'wepy-redux'import configStore from './store' const store = configStore()setStore(store) // setStore为Insert store 导入页面 // store 文件夹下的index.jsimport { 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 解决异步问题

Get storeimport { getStore } from 'wepy-redux' const store = getStore()//dispatchstore.dispatch ({type: 'xx ', payload: data}) //xx 是reducer 名称，payload 是正在传输的数据。 store.dispatch(getAllHoomInfo(store.getState().base))) //xx 是操作名称。 //获取stateconst state = store.getState()3. 连接组件 @connect({ data:(state) => state.base.data //这里注意下面的base是state，添加base }) 文件引入 redux file

type

types 触发操作的函数的名称。 只存储函数名

根据模块创建type.js

//base.jsexport const GETALLHOMEINFO = 'GETALLHOMEINFO'

函数名写入

export * from './counter'export * from ' ./base'reducers

随着您的应用程序变得更加复杂，您可能需要拆分reducer 函数。 每个划分的部分独立管理其状态的一部分。 此时多个模块的reducer会被combineReducers合并成最终的reducer。 函数，

import {combinReducers } from 'redux'importbase from './base'import counter from './counter'exportdefaultcombinReducers({base, counter})

这个模块使用handleActions处理reducer，并将多个相关的reducer写在一起。 handleActions 有两个参数。 第一个是多个减速器，第二个是初始状态。

GETALLHOMEINFO 减速器返回异步操作。 该值被分配给数据。

//base.js导入{ handleActions } from 'redux-actions'import { GETALLHOMEINFO } from '../types/base'constInitialState = { data: {}}导出默认的handleActions({ [GETALLHOMEINFO] (state, action) { return { . . .state, data: action.payload } }}, initialState)actions

Actions 正在处理数据

在index.js 中导出

export * from './counter ' export * from './base'

createAction 用于创建操作

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(asyncsolve => { let data = wait Http.get({ url: Apis . ls_url + Apis. allHomeInfo, data: {} })solve(data)** //返回Reducer中的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 }) 导出默认类 Index 扩展 wepy .page { data = { } 计算 = { } onLoad() { store.dispatch(getAllHoomInfo(store.getState().base)) } }

推荐教程：《微信小程序》

PHP 快速学习视频免费教程（入门到精通）

如何学习PHP？如何快速学习PHP？ 任何想要的朋友（从初级到高级）都可以保存并下载来学习。下载

这几篇文章你可能也喜欢：

• 如何将小程序二维码转换为链接？（如何将微信小程序二维码生成链接）
• 小程序下拉刷新问题（如何解决小程序下拉刷新问题）
• 改进异步封装：使用返回值处理异步调用【k3】Border City In
• 使用小程序创建弹窗输入组件（小程序实现点击按钮弹窗）。
• 如果我的小程序的 new Date() 方法失败，我该怎么办？

本文由主机参考刊发，转载请注明：使用wepy-redux并在小程序中保存全局变量（微信小程序中如何定义全局变量） https://zhujicankao.com/123755.html