Vuex实现数据增加和删除功能


Posted in Javascript onNovember 11, 2019

首先,我们要安装vuex,执行命令yarn add vuex

1.编写state数据

//vuex/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
  bookList: [
   {id: 1, name: '西游记'},{id: 2, name: '水浒传'},
   {id: 3, name: '红楼梦'},{id: 4, name: '三国演义'}
  ]
}
export default new Vuex.Store({
  state
})

2.组件调用state数据进行展示

我们的目的是把state数据赋值给vue组件进行使用,其实,这里有两种常用方法

//Home.vue
<p v-for='item in bookList'>{ {item.name} }<p/>

//方法一:通过computed的计算属性直接赋值,computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把state值赋值给vue模板中的data进行使用
computed: {
  bookList( ) {
   return this.$store.state.bookList;
  }
}

//方法二:通过mapState的对象来赋值
import { mapState } from 'vuex';//首先在组件内引入mapState
computed: {
  ...mapState(['bookList'])
}

方式二是我们经常用到的简写方式

基本的数据获取,就是这样的实现,此时我们看页面,就会循环展示state中的bookList数据

3.利用mutation、action实现增加删除数据

//vuex/index.js
const mutations = {
  ADD_ITEM(state,item) {
   state.bookList.push(item)
  }
}
const mutations = {
  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)
     }
   })
  }
}
const actions = {
  add_item({commit},item) {
   commit('ADD_ITEM',item)
  },
  del_item({commit},id) {
   commit('DEL_ITEM',id)
  }
}
export default new Vuex.Store({
  state,mutations,actions
})
//Home.vue
<button @click='add_item'>ADD</button>
<p v-for='item in bookList' @click='delItem(item.id)'>{ {item.name} }<p/>

import { mapState, } from 'vuex';

computed: {
  ...mapState(['bookList'])
}
methods: {
  add_item() {
   let newObject = {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
const getters = {
  newBookList:function( state ){
   return JSON.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实现数据增加和删除功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
详解js前端代码异常监控
Jan 11 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
js判断节假日实例代码
Dec 27 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 #Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 #Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 #Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 #Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 #Javascript
vue与django集成打包的实现方法
Nov 11 #Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 #Javascript
You might like
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
在smarty中调用php内置函数的方法
2013/02/07 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python使用进程Process模块管理资源
2020/03/05 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
煤矿班组长的职责
2013/12/25 职场文书
文明生主要事迹
2014/05/25 职场文书
财务负责人任命书
2014/06/06 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
村干部任职承诺书
2015/01/21 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
感谢师恩主题班会
2015/08/17 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python