Vuex详细介绍

stateandchangesexportdefaultnewVuex.Store({state:{count:0},mutations:{add(state){state.count++}}})派生状态exportdefaultnewVuex.Store({getters:{todoCount(state){returnstate.todos.filter(todo=>!todo.completed).length}}})异步操作exportdefaultnewVuex.Store({actions:{someAction(context){//dosomethingcontext.state;//访问状态context.commit()//提交更改context.dispatch();//调度操作}}})简化方法exportdefault{computed:{...mapState(['isLogin']),...mapGetters(['loginState'])},方法：{...mapActions(['login'])}}从'vue'导入Vue从'vuex'导入VuexVue.use(Vuex)constcart={state:{list:[]},mutations:{addCart(state,good){constret=state.list.find(v=>v.id===good.id)if(ret){ret.count+=1}else{state.list.push({good,count:1,active:true})}}}exportdefaultnewVuex.Store({state:{isLogin:false},getters:{loginState(state){返回state.isLogin？'Welcomebackas':'Visitor'}},mutations:{login(state){state.isLogin=true}},actions:{//{commit}是结构赋值requestLogin(contx,payload){console.log(contx)console.log(payload)//异步操作，告诉外界是否成功returnnewPromise(resolve=>{setTimeout(()=>{contxt.commit('login')resolve(true)},1000)})}},modules:{car??t}})vueximplementsYStore.jsimportVuefrom'vue'classYStore{constructor(options){this.state=options.statethis.mutations=options.mutationsthis.actions=options.actions//借用Vue自带的数据响应机制this.vm=newVue({data:{state:this.state}})}commit(type,payload){constmutation=this.mutations[type]mutation(this.state,payload)}dispatch(type,payload){constaction=this.动作[类型]constctx={提交：这个。提交，状态：这个。状态，调度ch:this.dispatch}returnaction(ctx,payload)}}exportdefaultnewYStore({state:{count:1},mutations:{add(state){state.count++}}})真正的源码**Vuex也是一个插件，实现了四个东西：state,mutations/actions/getterscreateStoredataresponsive**letvuefunctioninstall(_vue){Vue=_vue//store执行的时候会有vue，不需要toimport//这也是为什么vue.use在vue.mixin({beforeCreate(){//只有这样才能获取到传入的store//只有根元素才有store,所以判断if(this.$options.store){Vue.prototype.$store=this.$options.store}}})}classStore{constructor(options={}){this.state=newVue({data:options.state})this.mutations=options.mutations||{}this.actions=options.actionsoptions.getters&&this.handleGetters(options.getters)}//注意这里使用了箭头函数的形式，下面的action在实现的时候才会起作用commit=(type,arg)=>{this.mutations[type](this.state,arg)}dispatch=()=>{this.actions[type]({commit:this.commit,state:this.state},arg)}handleGetters(getters){this.getters={}//定义this.getters//遍历getters选项，为this.getters定义属性//属性名是option中的key，只需要定义get函数来保证它是只读的Object.keys(getters).forEach(key=>{Object.defineProperty(this.getters,key,{get:()=>{//注意它仍然是一个箭头函数returngetters[key](this.state)}})})}}exportdefault{Store,install}