quelle
Le nom est très long et proche de la bouche.En général, cet article est
mobx
un résumé de l'utilisation du processus de développement de petits programmes .La gestion des états est plus familière que tout le monde. Comme son nom l'indique, c'est pour gérer l'état compliqué du front-end. Je ne vais pas les répéter ici.
Donc, bien qu'il soit utilisé dans de petits programmes, mais je pense
WebApp
qu'il y a une telle perte d'inspiration pour la gestion de l'État.
Pourquoi
Pourquoi avez-vous besoin de gérer le statut?
Le petit programme actuel estHybrid App
similairePWA
, mais il en est aussi unWebApp
, bien sûr il l'est aussi , sans oublier que sa syntaxe estvue
légèrement similaire à celle-ci. Ilreact
etvue
pratique d' abord, donc pour autant de pages et le cache de données d'état sur un petit programme, mais aussi liés à l'introduction d'un outil de gestion de l' EtatPourquoi Mobx est
pratique, rapide et à faible coût d'apprentissage, bien sûr, le bienveillant voit le bienveillant
Comment
Introduisez mobx
dans l' applet. Ici j'utilise la bibliothèque wechat-weapp-mobx . Dans./libs
dans le répertoiremobx.js
etobserver.js
les deux bibliothèques, alors que./store
sous le nouveau répertoirestore.js
pour le stockage de l' état global.-
Étant donné que le magasin ne prend pas en charge les@decorate
décorateurs dans le petit magasin , ilextendObservable
est écrit. De plus, l'applet prend en charge laimport
grammaire et larequire
grammaire. Je préfère laimport
grammaire, et vous? Je ne pense pas queaction
vous devriez y écrire du code logique complexe, le garder concis et réutilisable, qu'en pensez-vous// store.js // 引入必须的库 const mobx = require('../libs/mobx'); const extendObservable = require('../libs/mobx').extendObservable; const computed = require('../libs/mobx').computed; const toJS = require('../libs/mobx').toJS; let store = function () { extendObservable(this, { // observable data players: [], // computed data get count() { return this.players.length; } }); // action this.addPlayer = name => { let len = this.count; //此处调用computed data let id = len === 0 ? 1 : this.players[len - 1].id + 1; this.players.push(new player(name, id)); } } export default store;
-
magasin global d'introduction
est bien connu que l'utilisationmobx
destore
vous voulez utilisernew store()
, si l' on veut appeler l'impossible global lié à chaque pagenew
unsotre
, parce que chaque pagestore
est une marque nouvellestore
. Ici, je l'aiapp.js
présentéstore
et monté sous des variables globalesglobalData
. De plus, l'omission de chemins n'est pas prise en charge dans les applets.//app.js const observer = require('./libs/observer').observer; import store from './stores/index'; // 小程序中不支持省略调用 App(observer({ onLaunch: function () { }, globalData: { store: new store() } }))
-
L'appel du magasin global dans les pages
peut utiliser ladata
liaison bidirectionnelle intégrée en même temps.// index.js const observer = require('../../libs/observer').observer; let app = getApp(); Page(observer({ data: { mes: 'hello jim green' }, props: { store: app.globalData.store }, }))
-
Appeler le magasin dans la page
<view class="players-list"> <view class="players-item" wx:for="{{props.store.players}}" wx:key="{{item.id}}"> // 调用observable data <text class="players">{{item.id}}:{{item.name}}</text> </view> <view>{{props.sotre.count}}</view> // 调用computed data </view>
-
Le
problème de la mise à jour de plusieurs pages de la boutique arrive. Pour le moment, les pages multiples sontstore
toujours indépendantes. Comment les mettre à jour toutes? La réponse estonShow
etonHide
ouonUnload
les trois fonctions avec le cycle de vie d'un nouveau mondestore
onShow: function() { // 显示时更新本页面store this.props.store = app.globalData.store }, onHide: function() { // 隐藏时更新全局store app.globalData.store = this.props.store; }, onUnload: function() { // 页面跳转返回时更新全局store app.globalData.store = this.props.store; },
-
magasin localStorage et le stockage à long terme
prise en compte également la question des accidents de réseau, je vaisstore
être stockés danslocalStorage
afin de récupérer, j'étais dansindex.js
l'onLoad
appelget storage
, auonHide
milieuset storage
. Étant donné que latoJS
méthode a renvoyé un[Symbol.iterator]()
objet non pris en charge , les paramètres suivants ont été définis dans le magasin// index.js onLoad: function () { let store = wx.getStorageSync('store'); if(store) { this.props.store.formStorageToStore(store); } }, onHide: function () { let store =this.props.store.currentStore; wx.setStorageSync('store', store) }, // store.js get currentStore() { let {players,games,currentGame,hidden,filter} = toJS(this); return {players,games,currentGame,hidden,filter}; } this.formStorageToStore = ({players,games,currentGame,hidden,filter}) => { this.players = players; this.games = games; this.currentGame = currentGame; this.hidden = hidden; this.filter = filter; }
autres
Dis moi quelque chose
L'adresse de l'exemple d'applet pour ce projet est weapp-bmscore . Vous pouvez faire attention au 666