vuex example02

最新推荐文章于 2023-02-11 21:21:49 发布

fyinthesky

最新推荐文章于 2023-02-11 21:21:49 发布

阅读量134

点赞数

分类专栏： vue2 vuex 文章标签： vue2 vuex

本文链接：https://blog.csdn.net/fyinthesky/article/details/87938412

版权

vue2 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vuex

5 篇文章 0 订阅

订阅专栏

<!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/vue@2.5.22/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<script src="https://unpkg.com/vuex@2.3.0" ></script>

</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>

fyinthesky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuex example02

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫