微信小程序数据共享，类似vue中的VUEX

微信小程序数据共享，类似vue中的VUEX

一.在页面中使用
1.1 首先构建npm

首先在终端中输入

npm init

跟标签中出现package.json即可；

修改app.json文件将 app.json 中的 “style”: “v2” 去除

配置project.confing.json中

 "packNpmRelationList": [
            {
   
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./"
            }
        ],

提示：点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

配置成功后便可以成功构建npm

npm构建成功后便可以进行后续操作

1.2 全局数据共享（vuex）

第一步：要完成接下来的操作首先我们需要下载两个依赖

mobx-miniprogram

创建Store实例对象

mobx-miniprogram-bindings 把Store中的共享数据或方法绑定到组件或页面中

npm install --save  mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

提示：安装后需要重新构建

第二步：创建store.js

创建和pages目录平级的目录store，在里面创建store.js文件

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


//  按需导出store实例
export const store = observable({
   
//  共享数据字段          
    numA: 10,
    numB: 20,
                
//  定义计算属性 get表示sum属性是只读的           
    get sum(){
   
        return this.nu