大家看看完成后的效果图。
到这里大家应该懂了
vuex的内部代码的工作流程了，
vuex的一半核心应该在这里了。为什么说一半，因为还有一个核心概念
module，也就是
vuex的数据的模块化。vuex数据模块化
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
例如下面的
store.js
// 实例化store，参数数对象
export default new Vuex.Store({
modules: {
// 模块a
a: {
state: {
count: 4000
},
actions: {
change ({state}) {
state.count += 21
}
},
modules: {
// 模块b
b: {
state: {
count: 5000
}
}
}
}
},
state: {
count : 1000
},
getters : {
newCount (state) {
return state.count + 100
}
},
mutations: {
change (state) {
console.log(state.count)
state.count += 10
}
},
actions: {
change ({commit}) {
// 模拟异步
setTimeout(() => {
commit('change')
}, 1000)
}
}
})然后就可以在界面上就可以写上
this.$store.state.a.count(显示a模块count)，
this.$store.state.a.b.count(显示a模块下，b模块的count)，这里还有一个要注意的，其实在组件中调用
this.$store.dispatch('change')会同时触发，根的
actions和
a模块的
actions里面的
change函数。下面我们就直接去实现
models的代码，也就是整个
vuex的实现代码，
'use strict'let Vue = null
const myforEach = (obj, callback) => Object.keys(obj).forEach(key => callback(key, obj[key]))
class Store {
constructor (options) {
let state = options.state
this.getters = {}
