wxMiniStore

一個基於原生小程式的mini全域性狀態管理庫，五行程式碼即可引入。git地址戳我

• 全域性狀態state支援所有Page和Component，狀態完全同步，並提供api更新狀態。
• 週期監聽pageLisener能監聽所有頁面的onLoad，onShow等週期事件。
• 全域性事件methods，全域性可用的方法。
• 適合原生小程式，可以隨時引入，不影響原有的業務，拓展性強。

導航

• 開始
• 全域性狀態
• 全域性方法
• Api說明
• 總結及建議

開始

1. 引入

將本專案中util下的store.js複製到你的專案中，並引入：

const Store = require('util/store.js'
 
);

2. 例項化一個全域性狀態 state

Store 允許傳一個引數，型別為Object，全域性狀態寫入物件state中，讀取請使用store.$state。

let store = new Store({
  state: {
    msg: '這是一個全域性狀態'
  }
})
console.log(store.$state.msg); //這是一個全域性狀態

3.在App中注入store

這麼做是為了在其他頁面中使用store。

App({
  onLaunch: function () {

  },
  store: store
})

4.頁面上使用

在所有wxml中，可使用$s$

  <view>{{$state.user.name}}：{{$state.msg}}</view>

顯示為 李四：這是一個全域性狀態。

如果在template檔案中使用，需在屬性data中引用$state

  <!-- 這是一個template -->
  <template name="t1">
    <view>{{$state.msg}}</view>
  </template>

<!-- 這是引用位置 -->
 

  <template is="t1" data="{{$state,arg1,arg2}}" />
<!--   相當於<template is="t1" data="{{$state:$state,arg1:arg1,arg2:arg2}}" /> -->

5.如何修改狀態

js中使用app中的store來進行操作狀態。具體參見下面api說明。

const app = getApp()
Page({
  data: {

  },
  onLoad: function () {
    //所有wxml中的$state.msg會同步更新
    app.store.setState({
       msg: "我被修改了，嗚嗚..."
    });
  }
});

週期監聽 pageLisener

在有的場景，我希望每個頁面在onLoad時執行一個方法（如統計頁面，監聽等）。原本做法是一個一個的複製貼上，很麻煩。
現在我們可以把某個週期，寫入pageLisener中，Store會自動在相應週期優先執行pageLisnner然後再執行原頁面週期內事件。

1.加入監聽

現在以監聽onLoad為例， 在Store中新增一個pageLisener物件，將需要監聽的週期寫入:

// store中
let store = new Store({
    //狀態
    state: {
		//...
    },
    //方法
    methods: {
		//...
    },
    //頁面監聽
    pageLisener: {
        onLoad(options){
            console.log('我在' + this.route, '引數為', options);
        }
    }
})

就這樣所有頁面的onLoad，將會優先執行此監聽。接下來看頁面內程式碼：

// index/index.js 頁面
Page({
    onLoad(){
        console.log(2)
    }
})

執行結果為:

// 我在index/index 引數為 {...} 
// 2

2.沒有第二步…

總結：

• 先執行pageLisener監聽，後執行原本頁面中週期。
• 還支援其他週期事件 [‘onLoad’, ‘onShow’, ‘onReady’, ‘onHide’, ‘onUnload’, ‘onPullDownRefresh’, ‘onReachBottom’, ‘onShareAppMessage’, ‘onPageScroll’, ‘onTabItemTap’]

全域性方法 methods

新增methods，全域性可使用。
適用於各個wxml中的互動事件(bindtap等), 你可以封裝一些常用的互動事件，如 行為埋點，型別跳轉等。

1.建立一個全域性方法

在原有狀態基礎上，新增一個methods物件，寫入你的全域性方法：

let store = new Store({
  //狀態
  state: {
      msg: '這是一個全域性狀態'
  },
  //方法
  methods: {
      goAnyWhere(e){
          wx.navigateTo({
              url: e.currentTarget.dataset.url
          })
      },
      sayHello(){
          console.log('hello')
      }
  }
})

這裡建立了一個全域性封裝的跳轉 goAnyWhere。

2.使用全域性方法

在wxml中，直接使用方法名呼叫:

<view bindtap="goAnyWhere" data-url="/index/index">
  首頁
</view>

在js中，直接使用 this.方法名 來呼叫:

Page({
  onLoad(){
      this.sayHello();
  }
})

在非頁面的js中，我們不建議使用Store中的全域性方法。但你可使用getCurrentPage().pop().sayHello() 來呼叫。

3.說明

• 儘量封裝複用率高的全域性方法
• 非互動型事件（即非bindxx）的公用方法，建議不寫入Store中。寫入App中更好。

api

這裡列舉了所有涉及到Store的屬性與方法。

new Store(options: Object) *已更新

該函式使用new關鍵字返回一個Store型別的例項。
引數options，為配置引數，
options.state 為初始全域性狀態。
options.methods 為全域性方法。

Store.prototype.setState(Object data, Function callback)

用於修改全域性狀態，用法與微信小程式的 Page.prototype.setData完全一致。在頁面中呼叫setState的資料為同步，渲染為非同步。在頁面未載入完成時，呼叫setState的資料為非同步（頁面週期attached時完成），渲染為非同步。
提示：頁面中應避免使用this.setData({$state: …})去操作當前頁面下的$state。如有相關需求，請使用頁面其他狀態儲存。

store.$state : Object

該物件為例項.$state， 返回的是全域性狀態（部分引用）。應避免直接操作修改它。

store.$r : Object

該物件為所有頁面或元件的例項。

總結及建議

考慮到後期的app.js內store不直觀，可以把整套store單獨寫入一個js中，通過require引入。如：

// mystore.js中
const Store = require('../util/store.js');
module.exports = new Store({
  state: {},
  methods: {}
})
//---------------------------
// app.js中
let store = require('store/mystore.js')
App({
  store
})

適用於全域性的狀態大範圍同步變動，如使用者資訊，臨時的購物車資訊，等等應用場景。原理實現上，原始碼很清晰，後期慢慢優化，歡迎指正。

給個star再走好伐… 戳我~