版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82015028
引入vue.js和vuex.js
1、基本模板搭建好后，接下来实现目标是把count数据在多个组件都能用
<div id="app">
<h1>vuex状态管理</h1>
<h1>{{count}}</h1>
<button @click="jia()">++++</button>
<button @click="jian()">------</button>
<hr>
<hehe></hehe>
<hr>
<haha></haha>
</div>
<template id="aaa">
<div>
<h1>AAAAAAAA</h1>
<h1>{{count}}</h1>
</div>
</template>
<template id="bbb">
<div>
<h1>BBBBBBBB</h1>
<h1>{{count}}</h1>
</div>
</template>2、引入store对象实例（状态管理器）；
state提供数据存储
mutations是vue中唯一可修改state状态中数据的地方
如下：a就是指state{ }对象里面的值
var store = new Vuex.Store({
state:{
count:0
},
mutations:{
jia(a){ //a就是指state里面的值
a.count++
},
jian(a){
a.count--
}
}
})3、在vue实例用计算属性computed：{ }接收 ，把count作为函数名，
然后返回store.state.count
computed:{
count(){
return store.state.count
}
},4、用 store.commit("jia") 接收 store里面mutations里的函数
methods:{
jia(){
store.commit("jia") //接收store里面的值
},
jian(){
store.commit("jian")
}
},5、在需要调用的模板添加如下
computed:{
count(){
return store.state.count
}
}然后在对应的组件就可以看到共同的数据
components:{
"hehe":{
template:"#aaa",
computed:{
count(){
return store.state.count
}
}
},
"haha":{
template:"#bbb",
computed:{
count(){
return store.state.count
}
}
}
}6、也可以传参数，例如：
1、store.commit("jia",2) 即每次加2
jia(){
store.commit("jia",2) //接收store里面的值
},2、在mutations里，为jia添加参数b，b即为store.commit("jia",2)接收的参数2
jia(a,b){ //a就是指state里面的值
a.count+=b
}
mutations:{
jia(a,b){ //a就是指state里面的值
a.count+=b
},
jian(a){
a.count--
}
}效果图
完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.min.js"></script>
<script src="js/vuex.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h1>vuex状态管理</h1>
<h1>{{count}}</h1>
<button @click="jia()">++++</button>
<button @click="jian()">------</button>
<hr>
<hehe></hehe>
<hr>
<haha></haha>
</div>
<template id="aaa">
<div>
<h1>AAAAAAAA</h1>
<h1>{{count}}</h1>
</div>
</template>
<template id="bbb">
<div>
<h1>BBBBBBBB</h1>
<h1>{{count}}</h1>
</div>
</template>
</body>
<script>
var store = new Vuex.Store({
state:{
count:0
},
mutations:{
jia(a){ //a就是指state里面的值
a.count++
},
jian(a){
a.count--
}
}
})
new Vue({
"el":"#app",
data:{
str:0
},
methods:{
jia(){
store.commit("jia") //接收store里面的值
},
jian(){
store.commit("jian")
}
},
computed:{
count(){
return store.state.count
}
},
components:{
"hehe":{
template:"#aaa",
computed:{
count(){
return store.state.count
}
}
},
"haha":{
template:"#bbb",
computed:{
count(){
return store.state.count
}
}
}
}
})
</script>
</html>