全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[朔州seo公司首推久澳]小程序中wepy-redux的使用以及存储全局变量

  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,28 2020.10 [太原seo公司认准久澳]微信小程序点击获取多个formId的方法 本篇文章介绍了微信小程序点击获取多个formid的方法,文山市小程序开发哪家好希望对学习微信小程序开发的朋友有帮助□◇! 微信小程序点击获取多个formId的方法 微信小程序获取多个formId的方法, [太原se江阴市小程序开发哪家好将多个相关的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的使用以及存储全局变量的详细内容,[朔州seo公司首推久澳]更多请关注久澳传媒编程栏目其它相关文章-•!

[朔州seo公司首推久澳]小程序中wepy-redux的使用以及存储全局变量

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。