。

即把一个数据列为vuex#xff0c;然后每个组件可以使用这个对象#xff0c;也可也反过来反馈他

总体来说vuex就是一个共享单车每个人都可以使用他也可也对他进行反馈。

即把一个数据列为vuex然后每个组件可以使用这个对象也可也反过来反馈他

求和案例纯vue版

templatedivh1当前求和为{{sum}}/h1select

value11/optionoption

clickincrementOdd当前求和为奇数再加/buttonbutton

clickincrementWait等一等再加/button/div

default

this.n},incrementOdd(){if(this.sum

2){this.sum

this.n}},incrementWait(){setTimeout((){this.sum

this.n},500)},},}

/scriptstylebutton{margin-left:

5px;}

store其实就是下图VuexActions,Mutations,State的父亲它们三个之间的状态转换灰色箭头的api由store提供store.dispatchstore.commit等等

Actions一个普普通通的Object类型对象vc的改变会先通过store.dispatch()将值传递给action。

然后经由action通过store.commit()发送给Mutations。

Actions还可以通过ajax和后端交互就是下图中的Backend

如果不调用Backend

APIVC可以直接将数据交给Mutations绕开Actions。

也就是说Actions是可以跳过的

Mutations(n.

突变变更)它是一个Object类型的对象。

负责真正处理加工修改数据处理完成后将处理完成的数据传入State中

Vue的开发工具Devtools监测的就是Mutations里的数据

State也是一个Object类型的对象vuex会将里面的数据进行渲染还给VC更新VC

main.js

./storeVue.config.productionTip

falsenew

h(App),store,beforeCreate(){Vue.prototype.$bus

this}

templatedivh1当前求和为{{$store.state.sum}}/h1select

value11/optionoption

clickincrementOdd当前求和为奇数再加/buttonbutton

clickincrementWait等一等再加/button/div

default

{increment(){this.$store.dispatch(jia,this.n)},decrement(){this.$store.dispatch(jian,this.n)},incrementOdd(){this.$store.dispatch(jiaOdd,this.n)},incrementWait(){this.$store.dispatch(jiaWait,this.n)

},},mounted(){console.log(Count,this)}}

/scriptstylebutton{margin-left:

5px;}

{jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)},jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum

},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout(()

500);}

mutations{JIA(state,value){console.log(mutations中的JIA被调用了)state.sum

value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum

-value},

Vuex.Store({actions,mutations,state,