vuex解决跨组件之间数据共享问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>状态管理</title>
<script src="vue.js"></script>
</head>
<body>
<!-- vuex是状态管理，是为了解决跨组件之间数据共享问题的，一个组件的数据变化
会映射到使用这个数据的其他组件当中-->
<!-- 当应用遇到多个组件共享状态时候，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。
对于页面之间的传参对于多层嵌套组件将会很繁琐，而且对于兄弟组件之间的状态传递无能为力。所以
就将这些组件的共享状态抽取出来，以一个全局单例模式管理，即vuex-->
<div id="app">{{message}}</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations:{
updata:function(state,msg){
state.count = msg;
console.log("VUEX:"+state.count)
}
},
actions: {
updata:function(context,msg){
context.commit('updata',msg)
}
}
})
new Vue({
el:"#app",
data:{
message:this.$store.state.count
},
mounted:function(){
//同步
this.$store.commit('updata',20)
//异步
this.$store.dispatch('updata',10)
}
})
</script>
</body>
</html>
网友评论