黔优媒体网-软文媒体自助发稿平台!
  1. 行业资讯
  2. 正文

小程序中wepy

来源:黔优媒体网   时间:2024-09-19

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文件

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 #39;wepy #39;
 import { connect } from #39;wepy-redux #39;
 import { getAllHoomInfo } from #39;../store/actions/base.js #39;// 引入action方法
 import { getStore } from #39;wepy-redux #39;
 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的使用以及存储全局变量的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。


【免责申明】黔优媒体网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优媒体网官方立场,请读者仅做参考,本文标题:小程序中wepy;欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法/违规的内容,请您立即联系我们及时修正或删除。(邮箱号: kefu@qianu.com)
此操作需要登录,请先登录~
免费注册会员,尽享国内领先平台!