vue之vuex

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>