小程序中wepy-redux的使用以及存储全局变量-创新互联

这篇文章主要介绍了小程序中wepy-redux的使用以及存储全局变量，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

十年的锡林浩特网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整锡林浩特建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“锡林浩特网站设计”,“锡林浩特网站推广”以来，每个客户项目都认真落实执行。

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的使用以及存储全局变量-创新互联
URL地址：https://www.cdcxhl.com/article22/dsjpjc.html

成都网站建设公司_创新互联，为您提供云服务器、外贸网站建设、网站维护、网站设计、响应式网站、网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联