关于vuex的使用，大家自然不陌生，如果有不熟练的可以多看看vuex官网，记住一条原则：异步操作以及复杂的逻辑必须通过action实现，否则会报下列错误

Error: [vuex] do not mutate vuex store state outside mutation handlers.

项目源码

遵循原则：vuex对vue具有强依赖，vuex以及本demo只能用于vue项目。
demo拆解：实现state -> commit -> dispatch

• 实现state

tstore.vue文件

实例化一个new TStore，new 实例化会自动包含一个constructor属性
export default new TStore({state: {count: 1}
})
复制代码

tstore.js文件

import Vue from 'vue';  // 已经说过了，vuex对vue具有强耦，必须引入vueclass TStore {// new 实例化生成的constructor属性，指向他们的构造函数  constructor 是一种用于创建和初始化class创建的对象的特殊方法constructor(options) {  // options就是new Store的实例化 是state这个对象this.state = options.state;new Vue({ data: {state: this.state}});}
}
复制代码

index.vue文件

import store from './tstore';computed: {count(){  // 由于暂时没有实现mapState的方法，只能使用当前return store.state.count;}
},
复制代码

则相当于，在TStore里找到TStore.state，又通过class TStore找到tstore.vue文件中定义的count，则在index.vue里可以使用count

• 实现commit 定义mutations函数

  mutations: {add(state) {state.count++;}},
复制代码

调用commit
store.commit('add')

实现vuex

import Vue from 'vue';class TStore {constructor(options) {  // options就是new Store的实例化this.state = options.state;this.mutations = options.mutations;new Vue({  // vuex对于vue有强耦，只能用于vue redux则不是data: {state: this.state}});}commit(type, payload) {  // 此时type就是add，就是调用commit时传的参// this.mutations是定义的mutations函数，则this.mutations.app则是add这个函数，传入type参数即可实现const mutation = this.mutations[type];   // 拿到函数 执行mutation(this.state, payload); // 传参给mutation 也就是this.mutations函数}
}
复制代码

action的实现在源码里有详细备注，请大家多多指正。

总结

vuex实现是借用vue本身的数据响应式机制使state相应化，从而使state变化立刻相应在依赖的视图中。借助vue本身的数据响应式机制进行托管实现单向数据流。原理就是借助了vue的数据劫持，state的值变成响应式，如果state有改变，就通知组件。

上一篇
模仿vue的数据劫持，实现mvvm