出發(fā)點(diǎn)：之前起點(diǎn)小程序嘗試mpvue的一個(gè)重要原因就是mpvue支持狀態(tài)管理，雖然現(xiàn)在wepy也支持了redux函匕，但是其性能不是非常理想伐谈，且看到issue里面還是提了很多的bug纲菌，所以還是想著用原生來擼一個(gè)簡單夠用的。
Pub/Sub模式（發(fā)布/訂閱模式）
狀態(tài)管理中非常重要的點(diǎn)就是發(fā)布/訂閱模式逮京，發(fā)布/訂閱模式的原理非常簡單，一邊發(fā)布束莫，一邊訂閱懒棉。訂閱者在事件中心注冊具名事件和回調(diào)函數(shù)，發(fā)布者通知事件中心執(zhí)行所有同名的回調(diào)函數(shù)览绿。
訂閱者 ---- 注冊事件 ----> 事件中心 <---- 通知 ---- 訂閱者
事件中心（pubsub.js）
既然需要提供事件注冊（訂閱）的功能策严，那么必然需要一個(gè)地方來存放所有的事件，同一個(gè)事件名可以有多個(gè)回調(diào)饿敲，那么顯然數(shù)據(jù)結(jié)構(gòu)如下：
{
'fn_name': [fn1, fn2, fn3...],
...
}
所以事件中心的雛型如下：
export default class PubSub {
constructor() {
// events里存放的是所有的具名事件
this.events = {};
}
// 提供訂閱功能
subscribe(event, callback) {
...
}
// 提供發(fā)布功能
publish(event, data) {
...
}
}
訂閱功能：在具名事件的回調(diào)數(shù)組中推入了一個(gè)新的回調(diào)妻导，接受一個(gè)事件名和回調(diào)函數(shù)。
subscribe(event, callback) {
let self = this;
if(!self.events.hasOwnProperty(event)) {
self.events[event] = [];
}
// 沒有做去重
return self.events[event].push(callback);
}
發(fā)布功能：調(diào)用對應(yīng)事件名的所有回調(diào)函數(shù)怀各，參數(shù)為事件名和回調(diào)參數(shù)倔韭。
publish(event, data = {}) {
let self = this;
if(!self.events.hasOwnProperty(event)) {
return [];
}
return self.events[event].map(callback => callback(data));
}
Store對象（store.js）
該對象主要用于存儲(chǔ)共享數(shù)據(jù)，當(dāng)數(shù)據(jù)被更新時(shí)觸發(fā) stageChange 事件瓢对。
import PubSub from '../lib/pubsub.js';
export default class Store {
constructor(params) {
let self = this;
self.actions = {}; // 存儲(chǔ)異步方法
self.mutations = {}; // 存儲(chǔ)同步方法
self.state = {}; // 共享數(shù)據(jù)
self.status = 'resting'; // 防止手動(dòng)更新
self.events = new PubSub();
// 參數(shù)可以傳入初始的actions和mutations
if(params.hasOwnProperty('actions')) {
self.actions = params.actions;
}
if(params.hasOwnProperty('mutations')) {
self.mutations = params.mutations;
}
// Proxy：es6的方法寿酌，起到攔截的作用
self.state = new Proxy((params.state || {}), {
set: function(state, key, value) {
state[key] = value;
console.log(`stateChange: ${key}: ${value}`);
self.events.publish('stateChange', self.state);
// 防止手動(dòng)更新
if(self.status !== 'mutation') {
console.warn(`You should use a mutation to set ${key}`);
}
self.status = 'resting';
return true;
}
});
}
dispatch(actionKey, payload) { ... }
commit(mutaionKey, payload) { ... }
}
dispatch：調(diào)用 actions，可以執(zhí)行一些異步的操作硕蛹，然后調(diào)用commit
dispatch(actionKey, payload) {
let self = this;
if(typeof self.actions[actionKey] !== 'function') {
console.error(`Action "${actionKey} doesn't exist.`);
return false;
}
console.groupCollapsed(`ACTION: ${actionKey}`);
self.status = 'action';
self.actions[actionKey](self, payload);
console.groupEnd();
return true;
}
commit：調(diào)用mutations
commit(mutationKey, payload) {
let self = this;
if(typeof self.mutations[mutationKey] !== 'function') {
console.log(`Mutation "${mutationKey}" doesn't exist`);
return false;
}
self.status = 'mutation';
let newState = self.mutations[mutationKey](self.state, payload);
self.state = Object.assign(self.state, newState);
return true;
}
案例（狀態(tài)管理的應(yīng)用）
需求說明：在首頁將一本書加入書架醇疼，書架列表自動(dòng)更新硕并。
store/state.js
export default {
bookList: [],
};
store/mutation.js
export default {
addBook(state, payload) {
state.bookList.push(payload);
return state;
}
};
store/action.js
export default {
addBook(context, payload) {
context.commit('addBook', payload);
},
};
store/index.js
import actions from './actions.js';
import mutations from './mutations.js';
import state from './state.js';
import Store from './store.js';
export default new Store({
actions,
mutations,
state
});
訂閱（書架頁）
import store from '../store/index.js';
store.events.subscribe('stateChange', (params) => {
this.setData({
bookList: params.bookList
});
});
發(fā)布（首頁）
import store from '../store/index.js';
store.dispatch('addBook',{bookid: 203});
