vuex example01

最新推荐文章于 2022-04-22 13:50:26 发布

fyinthesky

最新推荐文章于 2022-04-22 13:50:26 发布

阅读量135

点赞数

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

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

版权

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> vote example</h2>
<hr>


   <div id="example-2">
   <div v-for="(item, key, index) in this.$store.state.voteitems">
   
<abc v-bind:item="item" v-bind:key="item.id"></abc>

   </div>
</div>

<script type="text/javascript">
var myStore = new Vuex.Store({
state:{
//存放组件之间共享的数据
           voteitems:[{text:'A',value:0},{text:'B',value:0},{text:'C',value:0},{text:'D',value:0}],

},
mutations:{
//显式的更改state里的数据
           changeadd:function(state,a){

           var t=myStore.state.voteitems
           for(var i=0;i<t.length;i++)
           {
                   if(t[i].text==a){
                   t[i].value++
                   }
           }

},
           changedet:function(state,a){

           var t=myStore.state.voteitems
           for(var i=0;i<t.length;i++)
           {
                   if(t[i].text==a){
                   t[i].value--
                   }
           }

},

           changeadjust:function(state,option){
var a=option.targ
           var type=""
           type= option.type
           var t=myStore.state.voteitems
           for(var i=0;i<t.length;i++)
           {
                   if(t[i].text==a){
                   if(type=='add'){
                   t[i].value++
                   }else{
                   t[i].value--
                   }

                   }
           }

},


},
getters:{

},
actions:{

}
});

Vue.component('abc',{

   template:`
           <div>
               <label :name="item.text">{{item.text}} {{item.value}}</label>
               <button @click="changeCount('add',$event)" :id="item.text" >add</button>
               <button @click="changeCount('det',$event)" :id="item.text" >det</button>
           </div>
       `,
       methods:{
               changeCount: function(type,event){

               /* ///注释，测试多参数传递
               if(type=='add'){
                   var targ=event.srcElement.getAttribute("id")
this.$store.commit('changeadd',targ)
               }else{
                   var targ=event.srcElement.getAttribute("id")
this.$store.commit('changedet',targ)
               }
               */

               //测试多参数传递必须写成对象或者数组再传入
               var targ=event.srcElement.getAttribute("id")
               var option={targ,type}
this.$store.commit('changeadjust',option)

},
       },

       computed: {
               abcname:function(){
                   //return this.$myStore.state.name
                   //return this.$store.state.name
               },
       },
       props:["item"]

       })


   new Vue({
       el: '#example-2',
       data: {

               //voteitems:[{text:'A',value:0},{text:'B',value:0},{text:'C',value:0},{text:'D',value:0}],
               // voteitems: this.$store.state.voteitems
       },
       store:myStore,

       computed:{

           // voteitemss(){
           //       this.voteitems = this.$store.state.voteitems
           // }
       }

       })

</script>

</body>
</html>

fyinthesky

关注

0
点赞
踩
0

收藏

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

&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;
复制链接

扫一扫