微信小程序使用全局变量一data store

一、实现原理

使用ES6关键字class，有兴趣可以自行查阅。

文章中涉及的方法，字段，如有错误请大佬指点，吸取一下大佬们的编程经验（坏笑）。

二、创建过程

1、完整目录结构。

└─ store
  ├─ index.js
  └─ modules
    └─ productStore.js
    ...其他模块

2、index.js。

通过将set方法接收的string参数进行拆分，将拆分后的string作为object[key]来使用。

import productStore from "./modules/productStore";

class store {
  constructor() {
    this.productStore = new productStore()
  }

  /**
   * 修改状态
   * @param {String} path -路径
   * @param {Any} data -更改的数据
   */
  set(path, data) {
    let new_path = path.split("/")
    let instance = this
    if (new_path.length < 2 && new_path.length > 0) {
      // 在本模块执行
      this[new_path](data)
    } else {
      // 多模块时
      for (let i = 0; i < new_path.length - 1; i++) {
        instance = instance[new_path[i]]
      }
      // 最后一位表示需要执行模块的方法
      instance[new_path[new_path.length - 1]](data)
    }
  }

  /**
   * 运行方法并获取返回值-同上
   * @param {String} path -路径
   * @param {Any} data -更改的数据
   */
  run(path, data) {
    let new_path = path.split("/")
    let instance = this
    if (new_path.length < 2 && new_path.length > 0) {
      // 在本模块执行
      return this[new_path](data)
    } else {
      // 多模块时
      for (let i = 0; i < new_path.length - 1; i++) {
        instance = instance[new_path[i]]
      }
      // 最后一位表示需要执行模块的方法
      return instance[new_path[new_path.length - 1]](data)
    }
  }
}

export default store

3、productStore.js

// productStore

class productStore {
  // product id
  product = -1
  productInfo = {
      id: 1,
      name: '西红柿',
  }
  constructor() {
   	//	可以在这里初始化一次数据
  }

  // change product id
  setProductId(data) {
    this.product = data
  }

  // change product info
  setProductInfo(data) {
    this.productInfo = data
  }
}

export default productStore

三、挂载全局和使用

1、挂载，在app.js中

tips：Why do you do this？

​ 挂载在wx上，可以在任何地方进行访问，分包 or components中都能行。（在分包中也可以将store单独独立出来作为这个分包的store，且只能在此分包中访问，可以试试。）

// app.js
import store from "./store/index";

wx.$store = new store();;	//	挂载到wx上

App({
  globalData: {
    // 客户端型号
    systemPlatform: "",
  },
  onLaunch: function () {
    const that = this;

    // 获取客户端信息
    wx.getSystemInfo({
      success: (res) => {
        that.globalData.systemPlatform = res.platform;
      },
    });
  },
  onShow: function () {
    
  },
});

2、使用

//	方法调用--set datas
wx.$store.set("productStore/setProductId", 5)

//	获取setProductId
wx.$store.productStore.setProductId    // 5