Data sharing between pages / components.

Steps to install npm package:

(Figure 1)

1. Open the compiler, right-click in the blank space of the file list and select "open in external terminal window" (as shown in Figure 1: 1)
2. Execute the command: npm init -y to initialize a package json. (the package.json file already exists in the project. This item is ignored). (file in Figure 1: 2)
3. With package After JSON, execute the command: NPM install -- save mobx- miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 [install mobx miniprogram and mobx miniprogram bindings packages (here is the writing method of the specified version, if the version is not specified, the @ version number is not required)]. (the installed version can be seen in 3 places in Figure 1)
4. In project config. In the JSON file, change packNpmManually to true, and the path in packNpmRelationList to ". /" (the new version will be placed in the directory, the path is wrong, and an error will be reported when building npm in the next step: xxxxxxx cannot be found)
5. After execution, delete the miniprogram_ NPM folder (if any), open the tool in the compiler -- build NPM (as shown in Figure 1), rebuild -- and then use the installation package (if it is not built, the package in the node_modules file will not be hit into the miniprogram_npm file, so it will not be executed). (see Figure 2 below)
6. For the old version, you need to open the "details" in the upper right corner of the compiler - check the use of npm. The new version can be used directly without manually checking in the details

(Figure 2)

use

1. Create a store folder in the root directory, and create a store under the folder JS file
2. store.js file to introduce # observable and action in mobx miniprogram.

   // store.js file:
   /* To create a store instance object:
         * observable Add fields, calculation properties, methods, etc
         * Calculation attribute: defined by get (read-only and cannot be modified)
         * action Method: modify the value in the store
   */
   import {
       observable,
       action
   } from 'mobx-miniprogram'
   
   export const store = observable({
       // Field / data
       store_count1: 1,
       store_count2: 2,
       // Calculation attribute: defined by get (read-only and cannot be modified)
       get store_count_sum() {
           return this.store_count1 + this.store_count2
       },
       // action method: used to modify the value in the store
       update_storecount1: action(function (step) {
           this.store_count1 += step
       })
   })
   

3. Use the on the "store.js share data" page js file:
   1. Import store JS file and the createStoreBindings method in mobx miniprogram bindings (the parameters are as follows) and hang it on the storeBindings variable (it is used for cleaning when the page is unloaded).
   2. Bind the method to the fields and actions of the createStoreBindings method.
   3. Use this Method / this Property call.

      // Call the of the page js file:
      /*
          createStoreBindings: When it is created, it is bound to the storeBindings variable for cleaning up when the page is unloaded
                 * The first parameter: this: bind to the current page instance,
                 * Second parameter (object):
                      store:Data source (bind some fields and methods in the store to the current page)
                      fields: Which fields are bound to this page for use
                      actions: Which methods are bound to this page
                  * Cleanup: call the destroystorebinds method
          
          destroyStoreBingds: Clean up createStoreBindings
      */
      import { createStoreBindings } from "mobx-miniprogram-bindings"
      import { store } from '../../store/store.js'
      
      Page({
          addcount1(e) {
              // Get the passed in value: e.target Dataset [printable e: console.log(e)]
              // Through this update_storecount1: call Update in action_ Storecount1 method
              this.update_storecount1(e.target.dataset.addstep)
          },
          onLoad: function (options) {
              this.storeBindings = createStoreBindings(this, {
                  store,
                  fields: ['store_count1', 'store_count2', 'store_count_sum'],
                  actions: ['update_storecount1']
              })
          },
          onUnload: function () {
              this.storeBindings.destroyStoreBingds()
          },
      })

4. Use the on the "store.js share data" page Display in wxml file:

   <!-- obtain store Share data in -->
   <view>{{store_count1}} + {{store_count2}} = {{store_count_sum}}</view>
   <!-- binding addcount1 Method, incoming+=Num. 
        Method:
               1.stay e.target.dataset Get incoming data from.
               2. implement storeBindings variable action Medium update_storecount1 Method, let store Medium store_count1 +2  
   -->
   <button bindtap="addcount1" data-addStep='{{2}}'>store_count1 +1</button>

   (operation effect: click the 'store_count1 +1' button in the page, and store_count1 will increase together with the value of store_count_sum)