微信小程序实现全局状态管理的方法整理

npm install --save mobx-miniprogram mobx-miniprogram-bindings
yarn add mobx-miniprogram mobx-miniprogram-bindings

import { observable, action } from 'mobx-miniprogram'

// 创建实例对象
export const chat = observable({
    // 定义两个全局参数
    chatList: [], // 购物车商品
    totalPrice: 0, // 购物车商品总价
    // 初始化购物车
    initChat: action(function (list) {
        this.chatList = list
    }),
    // 修改价格
    setPrice: action(function (price) {
        this.totalPrice = price
    }),
})

// 从 mobx-miniprogram-bindings 包中导入 `createStoreBindings` 方法
import { createStoreBindings } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Page({
   // onLoad 生命周期钩子中使用createStoreBindings，把指定 store 中的数据字段和更新函数映射到当前页面
    onLoad() {
        this.chatStore = createStoreBindings(this, {
          store: chat,
          fields: ['chatList', 'totalPrice'],
          actions: ['initChat']
        })
      },
      // 
      fu() {
        let chat = [
            {
                name: 'XXXX',
                price: '111'
            },
            {
                name: 'XXXX',
                price: '111'
            }
        ]
        this.initChat(chat)
      },
      // 页面卸载时,销毁当前页面的 store 绑定
      onUnload() {
        this.chatStore.destroyStoreBindings();
      }
    })

import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Component({
   behaviors: [storeBindingsBehavior],
   storeBindings: {
      store: chat,
      fields: ['totalPrice'],
      actions: ['setPrice']
   }，
   methods: {
     fn() {
       this.setPrice(666)
     }
   }
})

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      /* 绑定配置 1 */
    },
    {
      /* 绑定配置 2 */
    },
  ],
});

this.setPrice(666)
this.storeBindings.updateStoreBindings()
console.log(this.data.totalPrice)

    createStoreBindings(this, {store: xxx})
    storeBindings: {
      store: xxx,
    }