Water nuggets every day, today finally published articles in nuggets, big guys please take care of me.

First of all, Reactivity doesn’t have to be in Vue to be used, so this is why it started. There are better state management mechanisms in the mini-program, and this article is just for exploring.

1. Get the @vue/reactivity source code

Get it from anywhere, just don’t use the NPM build tool of the applet, it will be a problem.

2. Import the module into app.js

Copy the source code to a file that you define yourself. After importing the module, assign all functions in the module to wx.d for ease of use, but do not want to import them from other pages.

//app.js
import * as reactivity from './vendor/reactivity/reactivity.esm-browser.prod'

App({
  onLaunch: function () {
    this.initVueReactive()
  },

  initVueReactive() {
    console.log(Object.keys(reactivity))
    wx.d = {}
    Object.keys(reactivity).forEach(key= > {
      wx.d[key] = reactivity[key]
    })
  }
})
Copy the code

To write the shim.wx.d.ts file, use vscode/webstorm will prompt, because only the following three functions are tested, so there are only three function definitions

declare namespace wx {
  namespace d {
    function reactive(options: any) :void;
    function effect(callback: Function) :void;
    function computed(callback: Function) :any; }}Copy the code

Use in vscode will be prompted

3. Write a simple total price Page to test (pretend to have added Watch and computed🙄 to the Page)

When I click “Add” or “subtract”, the total price of the item will be automatically calculated by these variables. The Page function in the applet does not include the calculation and observer properties. Using the Reactivity state management, I can make the Page function pretend to have these functions.

Performance is not tested, but the simple function of using this, feel a little pants farting 😂



The WXML, JSON, WXSS code is not going to be shown here and I’m going to focus on the JS file

Page({

  /** * initial data for the page */
  data: {
    price: 1.2.number: 1.totalAmount: 0.postageAmount: 8.hasPostage: true.radioItems: [{
      value: 1.name: "Bag mail".checked: true}, {value: 0.name: "Free shipping"}},onLoad: function (options) {
    // Bind the state data to be managed.
    this.state = wx.d.reactive(this.data)
    
    // Side effects are equivalent to vue's Watch
    wx.d.effect(() = > {
      // Since effect has properties that use state management, they hook up and the side effects will be performed here.
      // Calculate attributes
      this.state.totalAmount = wx.d.computed(() = > {
        const postageAmount = this.state.hasPostage ? this.state.postageAmount : 0
        // Ignore the toFixed(2) calculation, just for demonstration purposes
        return (this.state.number * this.state.price + postageAmount).toFixed(2)})// Bind pairs to data
      this.setData({
        number: this.state.number,
        totalAmount: this.state.totalAmount,
      })
    })
  },

  // Increase the number
  onPressedNumberReduce() {
    if (this.state.number === 1) {
      return
    }
    this.state.number -= 1
  },

  // Reduce the quantity
  onPressedNumberPlus() {
    this.state.number += 1
  },
	
  // Select free or no free
  onRadioChange(evt) {
    this.state.hasPostage = evt.detail.value === "1"}})Copy the code

Finally, it feels like the code is all in one place, less fragmented than before 🙃

Reference:

Zhuanlan.zhihu.com/p/146097763 github.com/vuejs/vue-n…