@shene/wx-store
安装
使用 npm:
$ npm install @shene/wx-store
使用 yarn:
$ yarn add @shene/wx-store
须知
- 需要开启 使用
npm
模块 - 需要开启 增强编译
- 安装后 需要构建 npm
- 此包是为了在像 vue 中使用 vuex 库一样的方式在小程序中存储全局状态,此包只有 vuex 部分功能
开始使用
- 使用 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;
- 在 app 中挂载 store 对象
// /app.js
import store from './store/index';
App({
store,
onLaunch() {},
globalData: {},
});
- 在页面中使用 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 () {},
})
);