258资源分享网

一、微信小程序自身的应用状态是怎样定义的呢？

page({

data:{

item:'',

isLoading:true

},

onLoad:function(){

this.setData({

isLoading:false

})

}

})

二、为什么使用应用状态管理工具？

同一数据，一次请求，应用全局共享。  MVVM架构开发中清晰的数据流向——单向数据流。  将分散在不同页面的数据与应用状态统一管理，共享数据与状态变化。  适应组件化、模块化开发的数据结构，提高代码重复使用率、提高开发效率。  三、应用状态管理工具有哪些？

前端MVVM架构基础库有很多，目前主流的有React、Vue、Angular，不同的库有不同的应用状态管理方案，比如React常用的Flux，Redux，Mobx，Vue的Vuex，Angular的ngrx/store，Redux并不是React的专属，而是针对Redux有最优的解决方案，当然Redux同样也能移植到其他框架使用，比如可以在微信小程序中使用。

四、微信小程序如何选择应用状态管理工具库？

目前微信有移植的Redux与Mobx来作为应用状态管理，Redux 和 Mobx 都是当下比较火热的数据流模型，一个背靠函数式，似乎成为了开源界标配，一个基于面向对象，低调的前行。

函数式 vs 面向对象

函数式的优点：

将数据和处理逻辑分离，代码更加简洁，模块化，可读性好  易测试、易维护，测试环境容易模拟  逻辑代码可复用性强  相对比面向对象的编程：

javascript的弱类型，表明它基于对象，不适合完全函数式表达。  数学思维和数据处理适合用函数式，而业务逻辑的处理适合用面向对象。  逻辑严谨的函数式编程相当完美，但为了实现具体业务功能不得不写更多细粒度代码来实现，而面向对象的方式更为简洁和灵活。  Redux vs Mobx

那么具体到这两种模型，又有一些特定的优缺点呈现出来。

先来看 Redux 的特点:

import{ combineReducers }from'redux'

import{ createReducer }from'redux-immutablejs'

import{ fromJS }from'immutable'

import{

EXAMPLE

}from'../constants'

const example = createReducer(fromJS({

title:"项目构建成功"

}),{

[EXAMPLE]:(state, action)=>{

return state.merge({

title: action.payload.title

})

}

})

const rootReducer = combineReducers({

example

})

exportdefault rootReducer

import{

EXAMPLE

}from'../constants'

function example(val){

return{

type: EXAMPLE,

payload:{

title: val

}

}

}

exportfunction changeTitle(val){

return(dispatch, getState)=>{

dispatch(example(val))

}

}

声明式编程 reducer  纯函数 action 无副作用  不可变数据 immutable  对比Mobx：

var extendObservable =require('../libs/mobx').extendObservable;

var apiPath =require('../config/apiPath')

var{formatTime}=require('../utils/tool')

var app = getApp()

var userInfo =function(){

extendObservable(this,{

title:'我的预约',

data:{},

order:[]

})

this.receive =function(){

var that =this

app.getUserInfo(function(userInfo){

that.data = userInfo

})

}

this.getUserOrder =function(){

var that =this

wx.request({

url: apiPath.GETUSERORDER,

method:'GET',

header:{

'Authorization':`Bearer ${wx.getStorageSync('token') || []}`,

'Content-Type':'application/json'

},

success:function(json){

if(json.statusCode ==200){

that.order = json.data

}

},

fail:function(e){

console.log(e)

}

})

}

}