hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 君子好学,自强不息!

小程序中wepy-redux的运用以及存储全局变量_微信小程序

2020-06-21小程序ki4网14°c
A+ A-
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的运用以及存储全局变量的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
小程序中wepy-redux的运用以及存储全局变量_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>