Anim Store 状态管理

当我们需要使用跨页面数据同步时，一个好用的状态管理库非常的重要。Anim 内部集成了一个非常简单好用的 Store，可以同时支持 Page 和 Component，帮助开发者轻松实现状态管理。

如何使用

Anim Store 在页面 Page 级别和组件 Component 级别是一样的使用方式。

Store 定义

Store 中主要做两件事

定义 store 中的数据。
提供更新数据的方法。

我们看一个用户状态管理 UserStore 的简单案例

// /store/user.js
// 定义一个 UserStore
class UserStore {
  data = {
    name: '',

    // 计算属性
    computedName() {
      return 'hello ' + this.name
    }

    // 也可以直接使用 get 方法
    get computedName2() {
      return 'hello ' + this.name
    }
  }

  updateUserInfo(userInfo) {
    this.data.name = userInfo.name

    // update/updateApp 方法即为重新渲染的方法，一般情况下 update 就足够使用了。

    // update 该渲染方式仅会渲染当前页面/组件，后续页面仅会在 onShow 时更新，适合性能要求高的页面。
    this.update()

    // updateApp 该渲染方式会将所有页面/组件都触发更新，适合体验要求高的页面。
    // this.udpateApp()
  }
}

export default new UserStore()

页面 Page 使用

将 store 连接到 Page 上时需要注意 key 值的定义。

// /pages/index/index.js
import Anim from '@ssv-lab/anim';
import userStore from '../../store/user';

Anim.Page({
  store: {
    // 等同于挂载到了 this.data.user。
    user: {
      store: userStore,
      // 以下配置选填，可以实现按需注入，如果不提供则整个 store.data 会注入到页面/组件中
      mapToData(data) {
        return {
          name: data.name,
        };
      },
    },
  },
  onLoad() {
    // 异步更新数据
    wx.request({
      url: '/getUserInfo',
      success(res) {
        userStore.updateUserInfo(res.data);
      },
    });
  },
});

Store 挂载后，在页面上可以直接使用

html

<!-- /pages/index/index.wxml -->
<view> 用户名：{{user.name || '暂未登录'}} </view>

组件 Component 使用

组件和页面是一样的用法，只需要通过 Anim.Component 作为构造器即可。

// /components/A/A.js
import Anim from '@ssv-lab/anim';
import userStore from '../../store/user';

Anim.Page({
  store: {
    // 等同于挂载到了 this.data.user。
    user: {
      store: userStore,
    },
  },
  methods: {
    clearUserInfo() {
      userStore.updateUserInfo({ name: '' });
    },
  },
});

html

<!-- /components/A/A.wxml -->
<view>
  <view>我是组件</view>
  <view>用户名：{{user.name || '暂未登录'}}</view>
</view>

注意事项

这里再重复几个关键点：

数据更新的时候，需要使用 this.update 方法进行更新。
绑定到页面和组件的 store key，最终是会挂载到 this.data.${storeKey} 上。
update 方法会被注入到页面和组件上，请尽量避免定义 update 方法或者更改相应的名字。
store 树数据太大的话，会影响整体渲染性能，可考虑多个 Store 树或者使用 mapToData 的方案来做到按需注入。

与 Watch/Computed 共同使用

可以参照 watch 与 computed 相关篇章

Anim Store 状态管理 #

如何使用 #

Store 定义 #

页面 Page 使用 #

组件 Component 使用 #

注意事项 #

与 Watch/Computed 共同使用 #