Vuex 简单demo
<!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">
<title>Document</title>
</head>
<body>
<div id="root">
<h1></h1>
<button @click='addBtn()'>++号</button>
<button @click='minsBtn()'>--号</button>
<button @click='xxBtn()'>**号</button>
<br>
{{store.state.num}}
</div>
</body>
<script src="./vue.min.js"> </script>
<script src="./vuex.min.js"> </script>
<script type="text/javascript">
const store = new Vuex.Store({
state: {
num: 0
},
mutations: {
addEvent(state) {
state.num++;
},
minBtn(state){
state.num--;
}
},
actions: {
xxFn(){
setTimeout(()=>{
console.log('异步操作')
},1500)
}
}
});
// console.log(store.state.num);
// // store.commit("addEvent"); //同步 从上至下
// console.log(store.state.num);
new Vue({
el: "#root",
methods: {
//同步演示
addBtn() {
store.commit("addEvent");//加
},
//同步演示
minsBtn() {
store.commit('minBtn');//减
} ,
//异步方法演示
xxBtn(){
store.dispatch('xxFn');//异步方法
}
}
})
</script>
</html>
