支付宝小程序 herculex 状态管理？

Question

1. 如何更新全局变量？
2. mapMutationsToMethod: ['loadUserInfo'] 如何使用

import { GlobalStore } from 'herculex';

export default new GlobalStore({
   state: {
      userInfo: {},
      offsetTop: 0,
      offsetBottom: 0,
      scrollHeight: 0,
   },
   plugins: [], //'logger'
   mutations: {
      updateSystemInfo(state, payload) {
         state = Object.assign(state, payload);
      },

      updateUserInfo(state, payload) {
         state.userInfo = payload;
      },
   },
   actions: {
      async loadSystemInfo({ commit }, payload) {
         commit('updateSystemInfo', payload);
      },

      async loadUserInfo({ commit }, payload) {
         commit('updateUserInfo', payload);
      },
   },
});

import SystemInfo from './utils/tools/getSystemInfo';
import GlobalStore from './utils/store/globalStore';

App(
   GlobalStore({
      async onLaunch(options) {
         const systemInfo = SystemInfo.execute();
         // 如果更新 systemInfo 到 $global
      },
   })
);

index.js

import SystemInfo from '../../utils/tools/getSystemInfo';
import store from '../../utils/store/sharedStore';

Page(
   store.register({
      mapMutationsToMethod: ['loadUserInfo'],
      async onLoad(options) {
         // 如何使用 loadUserInfo 
      },
   })
);

Answer 1

更新全局变量和使用 mapMutationsToMethod 的完整实现：

globalStore.js

import { GlobalStore } from 'herculex';

export default new GlobalStore({
   state: {
      userInfo: {},
      offsetTop: 0,
      offsetBottom: 0,
      scrollHeight: 0,
   },
   mutations: {
      updateSystemInfo(state, payload) {
         // 更新系统信息
         Object.assign(state, payload);
      },
      updateUserInfo(state, payload) {
         // 更新用户信息
         state.userInfo = payload;
      },
   },
   actions: {
      async loadSystemInfo({ commit }, payload) {
         commit('updateSystemInfo', payload);
      },
      async loadUserInfo({ commit }, payload) {
         commit('updateUserInfo', payload);
      },
   },
});

---

app.js

import SystemInfo from './utils/tools/getSystemInfo';
import GlobalStore from './utils/store/globalStore';

App(
   GlobalStore({
      async onLaunch(options) {
         const systemInfo = SystemInfo.execute();
         // 更新全局状态 systemInfo
         this.$store.commit('updateSystemInfo', systemInfo);
      },
   })
);

---

index.js (页面级别)

import store from '../../utils/store/globalStore';

Page(
   store.register({
      mapMutationsToMethod: ['loadUserInfo'],
      async onLoad(options) {
         // 调用 loadUserInfo 方法，更新全局 userInfo
         this.loadUserInfo({
            name: 'Jane Doe',
            age: 25,
            email: '[e-mail]',
         });
      },
   })
);

---

思路分析

1. 全局变量更新：

   • updateSystemInfo 和 updateUserInfo 分别处理系统信息和用户信息的更新逻辑，通过 commit 方法触发。

2. 页面方法调用：

   • 在页面中通过 mapMutationsToMethod 注册 loadUserInfo，使得页面可以直接调用 this.loadUserInfo 更新全局状态。

3. 模块化设计：

   • SystemInfo.execute() 提取了设备或环境相关信息并更新到 state。
   • 用户信息可以根据实际需求从后端接口获取，然后通过 loadUserInfo 更新到全局状态。

Answer 2

App.js：

App(
  GlobalStore({
    async onLaunch(options) {
      const systemInfo = SystemInfo.execute();
      // 更新 systemInfo 到 $global
      this.$global.dispatch('loadSystemInfo', systemInfo);
    },
  })
);

Page(
  store.register({
    mapActionsToMethod: ['loadUserInfo'], 
    async onLoad(options) {
      
      const userInfo = { /* 用户信息 */ };
      this.loadUserInfo(userInfo);
      
      // this.$global.dispatch('loadUserInfo', userInfo);
    },
  })
);

Page(
  store.register({
    mapMutationsToMethod: ['updateUserInfo'],
    async onLoad(options) {
      const userInfo = { /* 用户信息 */ };
      this.updateUserInfo(userInfo);
    },
  })
);