vuex负责vue的数据管理和共享,适用于大型项目
安装vuex
npm install vuex --save;
运用vuex
主要有五大金刚:
export default new Vuex.Store({//$store为了让外部可以引用 state,//数据存储 mutations,//行为动作 actions,//异步改变state状态,也就是提交mutations的一些修改 $store.commit('things') getters//获取属性进行操作 })
简单编写
const state={
count:1,
bin:{
names:'chen'
}
}
const mutations={
add(state){
this.state.count+=1
},
reduce(state){
this.state.count-=1
}
}
const actions={
}
const getters={
}
模块类型编写
模块封装
const moduleA={
state:{
count:0,
},
mutations:{
add(state){
this.state.a.count+=100
},
reduce(state){
this.state.a.count-=100
}
},
actions:{}
}
const moduleB={
state:{},
mutations:{},
actions:{}
}
export default new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
})
页面渲染数据和事件
<button onClick={this.$store.commit(reduce)}><button>
<button>this.$store.state.count<button>
<button onClick={this.$store.commit(add)}><button>