@shene/wx-store

安装

使用 npm:

$ npm install @shene/wx-store

使用 yarn:

$ yarn add @shene/wx-store

须知

1. 需要开启 使用npm模块
2. 需要开启 增强编译
3. 安装后 需要构建 npm
4. 此包是为了在像 vue 中使用 vuex 库一样的方式在小程序中存储全局状态，此包只有 vuex 部分功能

开始使用

1. 使用 createStore 创建 store 对象

// /store/index.js
import createStore from '@shene/wx-store';

const store = createStore({
  state: {
    count: 0,
  },
  // 不需要页面配置，会自动配置到通过connect封装的page中
  globalState: {
    themeStyles: '',
  },
  mutations: {
    setCount(setState, count) {
      setState({
        count,
      });
    },
  },
  actions: {
    setCount({ commit, state }, count) {
      setTimeout(() => {
        commit('setCount', count);
      }, 3000);
    },
  },
});

export default store;

2. 在 app 中挂载 store 对象

// /app.js
import store from './store/index';

App({
  store,
  onLaunch() {},
  globalData: {},
});

3. 在页面中使用 store

// /pages/home/index.js
import { connect } from '@shene/wx-store';

// mapState有两种定义方式，mapState是你希望store中那些state注入到页面data中

// 1. 对象：此方式可以自定义key值
const mapState = {
  countData: 'count',
};

// 2. 数组：此方式data中的key值和state中保持一致，请勿在data定义同名key
const mapState = ['count'];

// 使用connect工厂函数动态注入state->data，并且页面的this上会增加this.$app 和 this.$store

Page(
  connect(mapState)({
    data: {
      name: '2222',
    },
    onLoad: function (options) {
      this.$store.commit('setCount', 2);
      this.$store.dispatch('setCount', 3);
    },
    // 同mapState相同功能，mapState存在则states失效
    states: ['count'],
    onReady: function () {},
    onShow: function () {},
    onHide: function () {},
    onUnload: function () {},
    onPullDownRefresh: function () {},
    onReachBottom: function () {},
    onShareAppMessage: function () {},
  })
);

License

MIT