<!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> x</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<!--
<script src="C:\Users\SDSC-XAD\node_modules\vuex\dist\vuex.js" />
<script src="https://unpkg.com/[email protected]" ></script>
-->
<script src="https://unpkg.com/[email protected]" ></script>
<!--
參考自 https://www.cnblogs.com/first-time/p/6815036.html
-->
</head>
<body>
<h1>vuex</h1>
<h2> 使用簡單例子</h2>
<hr>
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce" :duration="{ enter: 2000, leave: 1000 }">
<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
<abc></abc>
</div>
<script type="text/javascript">
//import Vue from'Vuex'
// Vue.use(Vuex);
var myStore = new Vuex.Store({
state:{
//存放組件之間共享的數據
name:"www",
age:28,
nums:0
},
mutations:{
//顯式的更改state裏的數據
change:function(state,a){
// state.num++;
console.log(state.nums += a);
},
changeAsync :function(state,a){
// state.num++;
console.log(state.nums += a);
}
},
getters:{
getAge:function(state){
var s="too young"
if(state.age<=28){
return s;
}
// return state.age;
}
},
actions:{
//設置延時
add:function(context,value){
setTimeout(function(){
//提交事件
context.commit('changeAsync',value);
},1000)
}
}
});
Vue.component('abc',{
template:`
<div>
<p @click='changeNum'>姓名：{{abcname}} 年齡：{{age}} 次數：{{nums}}</p>
<button @click='changeNumAnsyc'>change</button>
</div>`,
mounted:function(){
console.log(this)
},
computed: {
abcname:function(){
//return this.$myStore.state.name
return this.$store.state.name
},
age:function(){
//return this.$store.state.age
//使用getters
return this.$store.getters.getAge
},
nums:function(){
//return this.$store.state.age
//使用getters
return this.$store.state.nums
}
},
methods: {
changeNum: function(){
//在組件裏提交
// this.num++;
this.$store.commit('change',1)
},
//在組件裏派發事件 當點擊按鈕時，changeNumAnsyc觸發-->actions裏的add函數被觸發-->mutations裏的changeAsync函數觸發
changeNumAnsyc:function(){
this.$store.dispatch('add', 5);
}
},
})
new Vue({
el: '#example-2',
data: {
show: true
},
store:myStore,
})
</script>
</body>
</html>