After one year of practice, a cross-page data sharing scheme for mini-programs: Video-downloadp-mobx

A powerful tool for communication between pages

Add mobx data layer drivers to your applet

Current version: 0.1.8

Rely on MOBx version: 4.9.2

The installation

Method 1: NPM package (recommended)

Applets already support using NPM to install third-party packages, see NPM support

npm install wechat-weapp-mobx -S --productionCopy the code

Method 2: Manual installation

Clone or download the codebase locally:

 git clone https://github.com/80percent/wechat-weapp-mboxCopy the code

Copy dist/mobx.js, dist/diff.js and dist/observer.js files directly into the applet project, for example (assuming we have installed all third-party packages in libs):
```
CD video-appellate P-mobx cp mobx.js < appellate root directory >/libs cp diff.js < appellate root directory >/libs cp observer.js < appellate root directory >/libsCopy the code
```
The command above copies the package to the < applet root >/libs directory of the applet
Create a < applet root >/stores directory to hold the data layer.

Use (using ES5 syntax)

Create Mobx stores

// store/todostore.js // var extendObservable = require('.. /.. /libs/mobx').extendObservable; Var extendObservable = require(' video-downloadp-mobx /mobx').extendobservable; var TodoStore = function() { extendObservable(this, { // observable data todos: [], todoText: 'aaa', // computed data get count() { return this.todos.length; }}); // action this.addTodo = function(title) { this.todos.push( {title: title} ); } this.removeTodo = function() { this.todos.pop(); } } module.exports = { default: new TodoStore, }Copy the code

Bind the page linkage event

// var observer = require('.. /libs/observer').observer; Var observer = require(' video-download-mobx /observer').observer; Page(observer({props: {todoStore: require('.. /stores/todoStore').default, }, // your other code below onLoad: function(){ } }))Copy the code

instructions

After the above two steps are complete, you can access WXML using props. TodoStore and the data linkage is working automatically.
```
WXML <view>{{props.todostore.todotext}}</view>Copy the code
```
Automatic data linkage

Data in stores can be accessed simultaneously across pages, and pages are automatically updated when data is updated. Thus saving a lot of logical code.

ES6 syntax example

Check out the example: video-downloadp-mobx-todos-npm

Version Update Record

0.1.8

(Major) Officially upgraded MOBx to version 4.9.2 with support for the latest MOBx decorator syntax.
Try to support ES6 syntax, if there are bugs, please timely feedback.

Thank you very much for your technical contribution.

0.1.7 (Do not use)

Tentatively updated Mobx to 4.9.2 with new decorator syntax.
However, in Mobx 4.9.2, the props data object was cleared by an applet framework error.

0.1.6

Update the NPM package to 0.1.6

0.1.5

Optimized the toJSWithGetter interface to increase performance by 2 times again.
Adjust the directory and publish the NPM package.

0.1.4

Add diff processes to significantly improve trigger performance

0.1.3

Refactoring autorun mechanism to improve trigger performance.

0.1.2

Refactor toJS logic to support nested computed Value displays.
Supports props for observing existing property values, which can be modified to trigger an update view.

while

Optimize performance to avoid duplicate Mobx toJS objects.
Added version number support.

0.1.0 from

Implement mobx core support.

Examples (NPM integration, ES6 syntax demo)

For a detailed example, see “video-downloadp-mobx-todos-npm”

Clone the following repo and start the preview with applets:

git clone https://github.com/windy/wechat-weapp-mobx-todos-npm.git
Copy the code

Example (Manual installation)

For a detailed example, see “video-downloadp-mobx-todos”