微信小程序状态管理MobX

1、使用

1.1 安装 mobx-miniprogram 和 mobx-miniprogram-bindings

npm install --save mobx-miniprogram mobx-miniprogram-bindings

yarn add mobx-miniprogram mobx-miniprogram-bindings

1.2 创建xxx.js文件用于存放状态

（记得引入mobx-miniprogram）

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

// 创建实例对象
export const store = observable({
  // 定义全局参数
  search: '', //搜索
  
  // 初始化 用于改变状态
  initSearch: action(function (search) {
      this.search = search
  }),
})

1.3 在page中使用

● 在page中引入mobx-miniprogram-bindings
● 引入状态 例如：import {store} from “~/models/home”
● 在生命周期函数onload中使用createStoreBindings,把指定store中的数据映射到当前页面中
● 使用定义的initSearch方法更改search状态
● 注意：在onUnload（自定义组件 detached ）中清理函数，否则将导致内存泄漏

import { createStoreBindings } from "mobx-miniprogram-bindings"
import {store} from "~/models/home"
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // this.getComment();
    	this.chatStore = createStoreBindings(this, {
      store: store,
      fields: ['search'],
      actions: ['initSearch']
    })
  },

  //搜索信息改变时
  searchChange:debounce(function(e){
    this.data.search = e.detail;
    this.initSearch(this.data.search)
  },500),

   onUnload() {
    this.chatStore.destroyStoreBindings()
  }
})

1.4 在组件中使用

● 在page中引入mobx-miniprogram-bindings
● 引入状态 例如：import {store} from “~/models/home”
● 使用behaviors绑定storeBindingsBehavior
● storeBindings引入状态 进行使用

import { storeBindingsBehavior  } from "mobx-miniprogram-bindings"
import {store} from "~/models/home"
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['search'],
    actions: ['initSearch']
  },
  observers:{
    //监听search状态
    search(val){
      this.data.courseName = val;
      this.initinitSearch(val)
    }
  }
})

2、报错

2.1 报错module ‘pages/home/mobx-miniprogram-bindings.js’ is not defined, require args is ‘mobx-miniprogram-bindings’

解决方案：

• 构建npm
  
• 无法构建npm
• 报错message：发生错误 Error: D:\project\mitayun-live-weixin\miniprogram\ 未找到 appid: wxa7f90e3a33e3781a openid: o6zAJs57GKk0slT3kELcnQZaz6Pw ideVersion: 1.06.2306020 osType: win32-x64 time: 2023-08-05 17:06:34

解决方案如下：

在project.config.json文件中 找到setting，增加如下代码：

   "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./../你的项目名"
    }