小程式wepy整合redux實踐

2021-08-28 07:16:15 字數 1996 閱讀 1931

wepy是引入wepy-redux的,但是他那種寫法感覺不太好,所以自己參考vue中的vuex重寫了。

使用會清晰很多。

1.store修改為以下結構

// 1.定義state

export const state =

// 2.定義reducers

// carts為區分reducers

export const cartsreducers =

} // 書寫其他reducers

},state)

}// 3.定義actions

// action中可以且只能在其中定義非同步

export const cartsactions = )

})}) // 書寫其他actions

}3.modules/global.js

import  from 'redux-actions'

import from '@/utils/api'

// 1.定義state

export const state =

// 2.定義reducers

export const globalreducers =

} // 書寫其他reducers

},state)

}// 3.定義actions

export const globalactions =

4.modules/index.js

import  from 'redux'

import from './global'

import from './carts'

// 4.整合reducers

export const reducers = combinereducers()

// 5.整合actions

export const actions =

5.index.js

import promisemiddleware from 'redux-promise'

import from './modules'

// 6.redux的createstore建立store

export default function configstore ()

import  from 'wepy-redux'

import configstore from './store'

const store = configstore()

setstore(store)

7.使用頁面

import  from '../store/modules'

import from '@/utils/api'

console.log('modulea ignored: ', modulea) // => modulea ignored: {}

// 8.使用

// 前面乙個物件是定義state,後面定義actions

// 如果是直接操作reducers直接寫對應的reducers名稱,如:set_num: 'set_num'

@connect(,

carts(state)

},)

呼叫

// 9.呼叫

this.methods.set_num(5)

this.methods.fetch_carts()

到這裡就結束了。

小程式wepy 手寫板

參考 直接 template view class view class handbtn button catchtap clearnow class delbtn 重寫 button button catchtap exportimage class subbtn 完成 button view v...

微信小程式框架wepy筆記

全域性安裝或更新wepy命令列工具 npm install wepy cli g在開發目錄中生成demo開發專案,1.7.0之後版本請移步wepy cli文件 wepy new myproject1.7.0之後的版本使用 wepy init standard myproject 初始化專案,使用 w...

小程式wepy上拉下拉如何解決

列表上拉下拉載入資料是再常見不過的功能,第乙個想到的是scroll view元件,裡面有兩個事件,分別是bindscrolltoupper 拉到最頂部 和bindscrolltolower 拉到最底部 用bindscrolltoupper實現上拉效果極差,稍微滑一下就觸發,也就是說一言不合就下拉重新...