What’s Minax?

Minax is a state management library developed for small applications. It manages the state of all components of an application ina centralized store and can be configured to bind to caches, similar to Vuex. It is often used to resolve scenarios where multiple attempts are made to share the same state or where multiple attempts are made to change the same state.

Our advantages

  • Global state supports App, Page, Component, and Behavior (stronger than other libraries on the market)
  • The application mode is similar to Vuex, and it is easier for students with relevant experience to get started
  • Code invasion is small, integration is simple, do not need to call getApp() in each page, directly this.$store….
  • Non-aware binding with cache (optional) is supported, hence goodbye to Storage

Applets support

Thanks to the mutual reference of the platform provided by each small program, our library can support almost all the small programs on the market (you only need to make a small amount of modification after the collection of the library). The lock cases in this document all take wechat small program as an example

  • Wechat applets
  • Alipay small program
  • Baidu applet
  • Jingdong Mini program
  • Headline applet

The installation

With the power of wechat small program, small program from the base library 2.2.1 to support NPM, document link, when using this plug-in it is recommended to upgrade your version to 2.2.1 or above

2.2.1 Import methods of the following versions

For the base library version 2.2.1 below, copy the dist directory of the library into your project and reference it as require or import

var Store = require('.. /dist/index.js') 
// The specific path can be adjusted according to your file directory
Copy the code

or

import Store from '.. /dist/index.js' // The specific path can be adjusted according to your file directory
Copy the code

Introduction of 2.2.1 and above libraries

Since the applet folder does not take the form of NPM by default, the first step is to initialize the applet project as an NPM project

npm init
Copy the code

Then use it according to your package management tool

npm install --save minax
Copy the code

or

yarn add minax
Copy the code

Once installed, click on the Developer Tools menu bar: Tools –> Build NPM

Check the “Use NPM module” option:

NPM package can be used after the build is complete.

const Store = require('minax')
Copy the code

start

At the heart of the Minax library is the Store. A “store” is basically a container that contains most of the states (states and actions) in your app.

Minax differs from pure global objects in two ways:

Minax’s state storage is based on the published-subscription model. When a page or component sets mapState in the store, it is equivalent to subscribing to the store for the state. If the state in the Store changes, the corresponding component and page will be updated efficiently accordingly.

You can’t change the state in the store directly. The only way to change the state in the store is to explicitly commit, which makes it easy to track every state change.

A simple store

We recommend creating a store/index.js file in the project. A simple store is written as follows:

import Store from '.. /dist/index.js'

const store = new Store({
  state: {
    cartCount: 0.mark: ' '
  },
  action: {
    setmark({commit}, payload) {
      setTimeout(() = > {
        commit('mark', payload)
      }, 2000)}}})export default store
Copy the code

Now you can retrieve state objects via store.state and trigger state changes via the store.mit method:

store.commit('mark'.'This is a note message.')

console.log(store.state.mark) // -> 'This is a note message'
Copy the code

In your project’s app.js, introduce store

import store from './store/index.js'
store.install()
Copy the code

MapState: [‘cartCount’, ‘mark’]; mapState: [‘cartCount’, ‘mark’]; ‘cartCount’, the mapState treated attribute is equivalent to the set month data, which you can get from this.data.cartCount, or from this.$store.state.cartCount

Page({
  data: {
    info: 'I am the home page'
  },
  mapState: ['cartCount'.'mark'].onLoad: function() {
    // The quantity increases by 1
    this.$store.commit('mark'.'This is a note message.')
    this.$store.dispatch('setmark'.'This is a comment message triggered by action')}})Copy the code

In WXML, binding changes directly can be done

<view class="mark">Note: {{mark}}</view>
Copy the code

By now, you should have a basic understanding of how to use this library

Related structural parameters

state

State is the entire state source of Minax. We bind the state with the key set in state, which has two features:

  1. Each key corresponds to a state that is eventually mixed into the data of a page or component through mapState, so its values must follow the same rules as those in data
  2. The key is used as the commit type, such as store.com MIT (key, payload).
new Store({
    state: {
         mark: 'default'}})Copy the code

bindStorageMode

Minax supports caches binding mode, you just need to know, because you don’t need to cache, store does all of this for you, initialize it automatically, update it automatically write, and you need to configure state persistence property when bindStorageMode equals true

export default new Store({
  // When binding the cache mode, the state input parameter is different
  bindStorageMode: true.state: {
    cartCount: {
      persistence: true.default: 0 // The real value is here
    },
    mark: {
      persistence: true.default: ' '}}})Copy the code

action

Actions are usually used to handle asynchronous things (I can’t help it if you have to use them synchronously)

PS: Another place to use action is when you want to set a global method and use it to update the status

import Store from '.. /dist/index.js'
export default new Store({
   action: {
     setmark({commit}, payload) {
       setTimeout(() = > {
         commit('mark', payload)
       }, 2000)}}})Copy the code

When using

this.$store.dispatch('setmark')
Copy the code

Ok, stop here for now, you can have fun coding