微信小程序中如何使用store數據共享

Posted on by

全局數據共享 全局數據共享(狀態管理)是為瞭解決組件之間數據共享的問題，開發中常用的全局數據共享方案有：Vuex、Redux、MobX等

在小程序中，可用 mobx-miniprogram (用來創建 Store 實例對象) 配合 mobx-miniprogram-bindings (用來把 Store 中的共享數據或方法，綁定到組件和頁面中使用)實現全局數據共享

安裝 MobX 相關的包 在項目中運行如下命令，安裝 MobX相關的包：(註意要啟用管理員權限) 安裝完成重新構建 npm

第一步：

npm install --save [email protected] [email protected]

安裝完成後選擇：工具-》構建npm

第二步：

在根目錄下創建store文件夾，並在其中創建store.js文件

在這個 JS 文件中，專門來創建 Store 的實例對象

import {observable,action} from 'mobx-miniprogram' 
 
export const store = observable({ //2、創建共享數據，並向外暴露出去
    //定義數據字段
    namesValue:'文龍剛',
    shopCarTotalCount:0,//購物車數量
    sitesPosition:wx.getStorageSync('sitesInfo')||'',//提貨點
    RestDay:true,
 
    shopTotalCount:action(function(step){//購物車總數
        console.log('傳遞過來的值是：',step)
        this.shopCarTotalCount+=step
    }),
    setSitesPosition:action(function(position){//設置提貨點
      this.sitesPosition=position
    }),
    getRestDay:action(function(type){
      this.RestDay=!this.RestDay
    })
})

 第三步：將 Store 中的成員綁定到頁面中

wxml：

<view>
  <!-- 這是調用參數的方法 -->
  <view>
    namesValue:{{namesValue}}
  </view>
  <!-- 這是調用方法的 -->
  <view>
    購物車數量：{{shopCarTotalCount}}
  </view>
  <view>
    <button bindtap="addShopCarTotalCount" data-step='1'>增加</button>
  </view>
 
  <!-- 更改狀態 -->
  <view>
    當前狀態：{{RestDay}}
  </view>
  <button bindtap="changeType">更改狀態</button>
</view>

JS：

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../libs/store.js'
//因為我是將store.js文件放在libs中瞭
Page({
    onLoad(options) {
        //第二步：這是store中參數及方法的導入
        this.storeBindings = createStoreBindings(this, {
            store,
            fields: ['namesValue','shopCarTotalCount', 'RestDay', 'sitesPosition'],
            actions: ['shopTotalCount',  'setSitesPosition','getRestDay'],
        })
  },
 
})

 ———————————將 Store 成員綁定到組件中—————————-

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../libs/store.js'
Page({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    // 數據源
    store, //指定要綁定的store
    fields:{//指定要綁定的字段數據
      numA:()=>store.numA,     //綁定字段的第一種方式
      numB:(store)=>store.numB,//綁定字段的第二種方式
      sum:'sum',               //綁定字段的第三種方式
    },
    actions:{ //指定要綁定的方法
      updateNum2:'updateNum2'
    }
  },
})

———————————在組件中使用 Store 中的成員———————————

//組件的 .wxml結構
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHander2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHander2" data-step="{{-1}}">numB-1</van-button>
//組件的 .js結構
methods: {
  btnHander2(e){
    this.updateNum2(e.target.dataset.step)
  }
}

到此這篇關於微信小程序中使用store數據共享的文章就介紹到這瞭,更多相關小程序store數據共享內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：