这个状态管理工具是仿照 vuex 的几个方法来写的，所以有 vuex 的基础同学很容易理解。

Github:https://github.com/GeorgeLeoo/JStore

1. 安装 在小程序根目录下新建一个 store 文件，将 jstore.js 引入小程序项目。
2. 准备 在 store 中新建index.js, actions.js, mutations.js, mutation-types.js, getters.js, state.js

state.js：是一个状态管理对象，用来管理所有的状态, state中所有属性不能被直接删除或者修改，必须通过 dispatch 或 getter 方法

module.exports = {
 userInfo: {},
 arr:[2,4,6,8]
};

mutation-types.js：包含多个 mutation 的 type 名称的常量

export const SAVE_USER_INFO = 'save_user_info';
export const UPDATE_USER_INFO = 'UPDATE_USER_INFO';
export const SAVE_WEATHER = 'save_weather';

mutations.js: 直接更新 state 的多个方法的对象

const {SAVE_USER_INFO,SAVE_WEATHER} = require('./mutation-types');
module.exports = {
 [SAVE_USER_INFO](state, {userInfo}) {
 state.userInfo = userInfo;
 },
 [SAVE_WEATHER](state, {weatherinfo}) {
 state.weatherinfo = weatherinfo;
 }
};

actions.js: 通过 mutation 间接更新 state 对象

const {SAVE_USER_INFO, SAVE_WEATHER} = require('./mutation-types');
module.exports = {
 saveUserInfo({commit, state}, {userInfo}) {
 console.log(userInfo);
 commit(SAVE_USER_INFO, {userInfo})
 },
 saveWeather({commit, state}) {
 wx.request({
 url: 'http://www.weather.com.cn/data/sk/101010100.html',
 success(res) {
 console.log(res.data);
 let {weatherinfo} = res.data;
 commit(SAVE_WEATHER, {weatherinfo})
 }
 })
 }
};

getter.js：store 的计算属性, 只有当它的值发生了改变才会被重新计算。

module.exports = {
 addTen: state => {
 return state.arr = state.arr.map((val) => val * 10);
 }
};

index.js: vuex最核心的管理对象

const Jstore = require('./jstore');
const state = require('./state');
const mutations = require('./mutations');
const actions = require('./actions');
const getters = require('./getters');
module.exports = new Jstore({
 state,
 mutations,
 actions,
 getters
});

在 app.js 中引入 index.js

const store = require('./store/index.js');

然后在app 的onLaunch()方法中调用store(this)将 store 注册到小程序中，以后再 Page 中直接使用 getApp().$store 获取 store 对象，其中 this 指向的是 App 对象。

假设将获取微信账户数据添加到 state 中，可以在获取数据后，使用以下方法将

getApp().$store.dispatch("saveUserInfo", {userInfo: e.detail.userInfo});

结果就将userInfo数据保存到 state 中，然后可以在页面的任意地方调用这个数据

dispatch有两个参数

• 第一个参数是 action 中定义的函数名
• 第二个参数是要保存的数据要传哪些参数给 action 中的方法，

比如获取天气数据： 在点击获取数据按钮时，执行以下这条语句

getApp().$store.dispatch("saveWeather");

结果：

当state 中有数据后，取出数据使用 getState 方法

getApp().$store.getState(["userInfo", "weatherinfo"], this);

getState()方法有两个参数

• 第一个参数是一个数组，数组中存放的都是state 中的 key 的名称
• 而二个参数是当前页面的 this 指向，如果设置了 this，就会将数据保存到当前页面的 data 中

API参考

JStore

const store = new JStore({...options})

JStore构造器选项

state

• 类型：object 在 store 上注册 state, state 是一个状态管理对象，用来管理所有的状态

mutations

• 类型：{ [type: string]: Function } 在 store 上注册 mutation，处理函数总是接受state作为第一个参数, payload作为第二个参数（可选）

actions

• 类型：{ [type: string]: Function } 在 store 上注册 action。处理函数总是接受context作为第一个参数，payload作为第二个参数（可选）。 context对象包含以下属性：

{
 state, // 等同于 `store.state`
 commit, // 等同于 `store.commit`
}

getters

• 类型：{ [type: string]: Function } 在 store 上注册 getter，getter 方法接受 state 参数

JStore 实例属性

state

• 类型：Object 根状态，只读，state 内部的第一层数据也是只读的

JStore 实例方法

commit

• commit(type: string, payload?: any) 提交 mutation。

dispatch

• commit(type: string, payload?: any) 分发 action。

getState

• commit(type: array, context?: object) 获取 state。

最后附上全部源码（只有短短的140多行，看完你就可以写出来）

结尾送上微信小程序学习视频，还有其他的前端学习视频！！！

前端学习视频传送门

vue视频教程来啦，每周末都有前端视频教程学

微信小程序视频教程来啦，每周末都有前端视频教程学

vue视频教程来啦，每周末送前端视频教程，私信可得

从入门到精通实战Go web编程视频来啦，每周末都有前端视频教程学