Applets page communication

There are many solutions, including local caching, global variables, and handwritten subscription publishing. This article focuses on another solution, which is to temporarily store the execution context of the current page and then invoke it on another page.

Making the address

Introduction to the

Mainly to solve the problem of applet communication across the page, I want to use the simplest, most elegant, and users can be very convenient to use the gadget.

The installation

Just place the store.js file in the utils folder (which can be any folder) and import the file.

The introduction of

import store from "path/store.js"
Copy the code

use

The recommended process is as follows, for example, page B needs to use the data in page A.

1. I’m going to put store in page A and then I’m going to use it in the onLoad methodstore.addData(this, "a")To load the execution context of the current page into the store datapool.
2. Store is introduced on page B, and then it can be passed on page BStore. A. dataTo obtain the value of the corresponding data, you can also passA. Data name = "balabala"To assign a value to the corresponding data. Note that such assignment is reactive and does not need to passsetDataFunction to do this. (Not implemented yetsetDataDirect assignment is recommended.

Methods introduction

• Add page data

  store.addData( context, name )
  Copy the code

  Parameter Description:

  • context

    The execution context, which is this of the current page

  • name

    Name the current page, that is, while the other page values store.name. Property, which defaults to the path to the current page

• Remove page data

  store.removeData( name )
  Copy the code

  Parameters that

  • name

    The name of the page data that you want to delete

• To get the data

  letValue = store. Page name. PropertyCopy the code

  In this way, the data can be obtained, and the data pool is encapsulated by proxy in the background, so as to facilitate user use

• Modify the data

  Store. Page name. Property = valueCopy the code

  This assignment is done, and the background is still using the encapsulated setData

• Checks whether the attribute exists

  property inStore. The page nameCopy the code

  code

  / * * * @ author xiaoheng * @ time 2019/8/1 * * @ @ making https://github.com/xiaoheng21 tip also is looking for a job and have the opportunity to hope to inform, coordinate * / Beijing
  /** ** state management class * @constructor constructor * @_data internal data, used to save page data * @addData add page data * @removeData remove unwanted page data, reduce memory stress */
    class Store {
      constructor() {
        this._data = {};
      }
    
      @param {Object
          
           } context this * @param {String} name Specifies the name of the data in the current page. Used to read data from another page. The default value is the path to the current page */
          
      addData(context, name) {
        // If name is passed, page path is used
        let routeName = name ? name : context.route;
        // Set up the proxy to simplify operations
        let proxyContext = new Proxy(context, {
          // Get data, if the data is in the outer layer, return the outer data
          get: function(context, property) {
            if (property in context) {
              return context[property];
            } else {
              // If there is no data in the outer layer, look in "this.data", if there is, return data
              if (property in context.data) {
                return context.data[property];
              } else {
                // If no, an error is reported
                console.error(`${name}The page does not have this property '); }}},// Change data to encapsulate "this.setData" to simplify operations
          set: function(context, property, value) {
            context.setData({
              [property]: value
            });
            return true;
          },
          // Check whether the data exists
          has: function(context, property) {
            return property incontext.data; }});// Add proxy objects to the datapool
        this._data[routeName] = proxyContext;
      }
    
      @param {String} name Specifies the name of the page to be removed */
      removeData(name) {
        if (name in this._data) {
          delete this._data[name];
        } else {
          console.error('The attribute you want to delete does not exist'); }}}// Create a singleton and share a datapool globally
    const store = new Store();
    
    // Create proxy, privatize _data, simplify user operations, improve security
    let proxyStore = new Proxy(store, {
      // If the attribute is add remove, return the function directly
      get: function(store, property) {
        if (property in store) {
          return store[property];
        } else {
          // If the data accessed is page data, the page proxy object is returned
          if (property in store._data) {
            return store._data[property];
          } else {
            // If there is no page information, an error is reported
            console.error("Accessed page data not loaded into datapool"); }}}});export default proxyStore;
  Copy the code