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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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
PHP防CC攻击实现代码
2011/12/29 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP错误处理函数
2016/04/03 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
vuejs实现递归树型菜单组件
2018/01/13 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
师范应届生语文教师求职信
2013/10/29 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
大学军训感言200字
2014/02/26 职场文书
法制宣传实施方案
2014/03/13 职场文书
委托书的写法
2014/09/16 职场文书
迎新生欢迎词
2015/01/23 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
文明上网主题班会
2015/08/14 职场文书