wepy里推薦使用wepy-redux存儲(chǔ)全局變量使用1.初始化store// app.wpy import {
setStore }
from '
wepy-redux'
import configStore from '
./store'
const store = configStore() setStore(store) //setStore是將store注入到所有頁(yè)面中// 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)) //生成一個(gè) store 對(duì)象 return store }
applyMiddleware 函數(shù)的作用就是對(duì) store.dispatch 方法進(jìn)行增強(qiáng)和改造這里就是使用redux-promise來(lái)解決異步2.page里面獲取storeimport {
getStore }
from '
wepy-redux'
const store = getStore() // dispatch store.dispatch({
type: '
xx'
, payload: data}
) //xx是reducer名字 payload就是攜帶的數(shù)據(jù) store.dispatch(getAllHoomInfo(store.getState().base)) //xx是action名字 //獲取state const state = store.getState()3.連接組件@connect({
data:(state) => state.base.data //注意這里是base下的state 所有要加上base. }
)文件介紹redux文件typetypes里是觸發(fā)action的函數(shù)名稱 只是存儲(chǔ)函數(shù)名字按照模塊去創(chuàng)建type.js//base.js export const GETALLHOMEINFO = '
GETALLHOMEINFO'
寫(xiě)好了函數(shù)名稱 在index.js中export出來(lái)export * from '
./counter'
export * from '
./base'
reducers隨著應(yīng)用變得復(fù)雜，需要對(duì) reducer 函數(shù) 進(jìn)行拆分，拆分后的每一塊獨(dú)立負(fù)責(zé)管理 state 的一部分這個(gè)時(shí)候多個(gè)模塊的reducer通過(guò)combineReducers合并成一個(gè)最終的 reducer 函數(shù)，import {
combineReducers }
from '
redux'
import base from '
./base'
import counter from '
./counter'
export default combineReducers({
base, counter }
)模塊使用handleActions 來(lái)處理reducer，將多個(gè)相關(guān)的reducers寫(xiě)在一起handleActions有兩個(gè)參數(shù)：
第一個(gè)是多個(gè)reducers，第二個(gè)是初始stateGETALLHOMEINFO 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)actionsactions是對(duì)數(shù)據(jù)的處理 在index.js中export出來(lái)export * from '
./counter'
export * from '
./base'
createAction用來(lái)創(chuàng)建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** }
) }
)用法推薦教程：
《微信小程序》以上就是小程序中wepy-redux的使用以及存儲(chǔ)全局變量的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
redux wepy 小程序本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
微信小程序常見(jiàn)的開(kāi)發(fā)問(wèn)題匯總
下一篇：
微信小程序自動(dòng)跳出來(lái)怎么解決？相關(guān)文章相關(guān)視頻微信小程序跳一跳在哪里找？怎樣阻止微信小程序自動(dòng)打開(kāi)？微信小程序之調(diào)用微信授權(quán)窗口微信小程序開(kāi)發(fā)中var that =this的基本...小程序中wepy-redux的使用以及存儲(chǔ)全局變量初識(shí)微信小程序(2)初識(shí)微信小程序(3)初識(shí)微信小程序(4) [溫州做小程序]