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 函數(shù)的作用就是對 store.dispatch 方法進行增強和改造這里就是使用redux-promise來解決異步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ù)名稱 只是存儲函數(shù)名字按照模塊去創(chuàng)建type.js//base.js export const GETALLHOMEINFO = '
GETALLHOMEINFO'
寫好了函數(shù)名稱 在index.js中export出來export * from '
./counter'
export * from '
./base'
reducers隨著應(yīng)用變得復(fù)雜，需要對 reducer 函數(shù) 進行拆分，拆分后的每一塊獨立負責管理 state 的一部分這個時候多個模塊的reducer通過combineReducers合并成一個最終的 reducer 函數(shù)，import {
combineReducers }
from '
redux'
import base from '
./base'
import counter from '
./counter'
export default combineReducers({
base, counter }
)模塊使用handleActions 來處理reducer，將多個相關(guān)的reducers寫在一起handleActions有兩個參數(shù)：
第一個是多個reducers，第二個是初始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是對數(shù)據(jù)的處理 在index.js中export出來export * from '
./counter'
export * from '
./base'
createAction用來創(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的使用以及存儲全局變量的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標簽：
redux wepy 小程序本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序常見的開發(fā)問題匯總
下一篇：
微信小程序自動跳出來怎么解決？相關(guān)文章相關(guān)視頻微信小程序跳一跳在哪里找？怎樣阻止微信小程序自動打開？微信小程序之調(diào)用微信授權(quán)窗口微信小程序開發(fā)中var that =this的基本...小程序中wepy-redux的使用以及存儲全局變量初識微信小程序(2)初識微信小程序(3)初識微信小程序(4) [溫州做小程序]