Vuex实现数据增加和删除功能
首先,我们要安装vuex,执行命令yarnaddvuex
1.编写state数据
//vuex/index.js importVuefrom'vue'; importVuexfrom'vuex'; Vue.use(Vuex); conststate={ bookList:[ {id:1,name:'西游记'},{id:2,name:'水浒传'}, {id:3,name:'红楼梦'},{id:4,name:'三国演义'} ] } exportdefaultnewVuex.Store({ state })
2.组件调用state数据进行展示
我们的目的是把state数据赋值给vue组件进行使用,其实,这里有两种常用方法
//Home.vue{{item.name}} //方法一:通过computed的计算属性直接赋值,computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把state值赋值给vue模板中的data进行使用 computed:{ bookList(){ returnthis.$store.state.bookList; } } //方法二:通过mapState的对象来赋值 import{mapState}from'vuex';//首先在组件内引入mapState computed:{ ...mapState(['bookList']) }
方式二是我们经常用到的简写方式
基本的数据获取,就是这样的实现,此时我们看页面,就会循环展示state中的bookList数据
3.利用mutation、action实现增加删除数据
//vuex/index.js constmutations={ ADD_ITEM(state,item){ state.bookList.push(item) } } constmutations={ ADD_ITEM(state,item){ state.bookList.push(item) }, DEL_ITEM(state,id){ state.bookList.map((v,i)=>{ if(v.id==id){ state.bookList.splice(i,1) } }) } } constactions={ add_item({commit},item){ commit('ADD_ITEM',item) }, del_item({commit},id){ commit('DEL_ITEM',id) } } exportdefaultnewVuex.Store({ state,mutations,actions }) //Home.vue{{item.name}} import{mapState,}from'vuex'; computed:{ ...mapState(['bookList']) } methods:{ add_item(){ letnewObject={id:this.bookList.length,name:'葫芦娃'} this.$store.dispatch('add_item',newObject) }, delItem(id){ this.$store.dispatch('del_item',id) } }
利用action派发mutation事件,实现增加和删除的操作
这里有一个很重要的概念:mutation是唯一修改state的方法,而action是操作mutation触发commit修改state的方式
4.使用getters过滤state数据
//vuex/index.js constgetters={ newBookList:function(state){ returnJSON.parse(JSON.stringify(state.bookList)).splice(0,1) } }
这样,我们在组件内部这样输出
mounted(){ console.log(this.$store.getters.newBookList) console.log(this.bookList) }
我们通过JSON拷贝,既可以得到过滤之后的state数据(1条数据),也可以得到原state数据(4条数据),个人理解,getters的作用就在这里
以上这篇Vuex实现数据增加和删除功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。