1. Instale o MOBX primeiro
No diretório onde o projeto está localizado, clique com o botão direito do mouse e selecione [Abrir em uma janela de terminal externo], execute:
npm install --save [email protected] [email protected]Após o sucesso, clique em [Ferramentas] - [Framework npm] nas ferramentas do desenvolvedor do WeChat e o trabalho de instalação estará concluído.
2. Coloque os dados a serem compartilhados em um arquivo store.js, importe o miniprograma mobx, os dados a serem compartilhados tem os campos num1, num2, métodos sum(), updateNum1, updateNum2, obs: precisa alterar o método dos dados compartilhados uso : modificação de ação
import {
observable,
action
} from 'mobx-miniprogram'
export const store = observable({
num1: 1,
num2: 2,
get sum() {
return this.num1 + this.num2
},
updateNum1: action(function (step) {
this.num1 = this.num1 + step
}),
updateNum2: action(function (step) {
this.num2 = this.num2 + step
})
})3. Faça referência à loja na página
Primeiro importe os vínculos do miniprograma mobx
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Na função de ciclo de vida onLoad
onLoad(options) {
this.storeBindings = createStoreBindings(this,
{
store,
fields:['num1','num2','sum'],
actions:['updateNum1','updateNum2']
})
}Na função de ciclo de vida onUnload
onUnload() {
this.storeBindings.detroyStoreBindings()
}4. Os dados compartilhados são exibidos na página:
arquivo wxml:
<button bindtap="addNum1" data-step="{
{1}}">+1</button>
<button bindtap="addNum2" data-step="{
{1}}">+1</button>
<view>num1:{
{num1}}+num2:{
{num2}}={
{sum}}</view>Métodos compartilhados podem ser usados em eventos:
addNum1(e){
console.log(e)
this.updateNum1(e.target.dataset.step)
}Como usar dados compartilhados em componentes?
Importe mobx-miniprogram-bindings no arquivo js do componente e, em seguida, declare os dados no nó do componente. Componentes e a introdução de vinculações de miniprogramas mobx na página acima são diferentes
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../store/store'
Component({
behaviors:[storeBindingsBehavior],
storeBindings:{
store,
fields:{
num1:'num1',
num2:'num2',
sum:'sum'
},
actions:{
updateNum1:'updateNum1',
updateNum2:'updateNum2'
}
}
}O método de exibição de dados compartilhados em um componente é o mesmo que o método de exibição de dados em uma página e não será repetido aqui.