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

2024-10-20 23:16:23

首先，我们要安装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实现数据增加和删除功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

使用vue根据状态添加列表数据和删除列表数据的实例

如下所示: <template> <div> <div v-for="obj of a" @click="sel(obj)"> {{obj.name}} <span v-if="!obj.select">+</span><span v-else>-</span> </div> <hr> <div> <div v-for=&
Vue 实现列表动态添加和删除的两种方法小结

下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g
Vue实现动态创建和删除数据的方法

视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ
vue+element实现表格新增、编辑、删除功能

几天前,需要做一个需求:新增一个xml文件时,添加数量不确定.属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样. 可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢?于是,通过上网以及自己的思考,终于实现了,代码.思路以及效果图如下: 1 html部分: <el-button type="success" @click="addRow(tableData)"&
在Vue组件上动态添加和删除属性方法

如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码详解Vue 动态添加模板的几种方法
详解vue添加删除元素的方法

相关版实例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例:添加删除元素r</title> <style type="text/css"> .form-group{ margin:10px; } .form-group>label{ displa
Vuex实现数据增加和删除功能

首先,我们要安装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 def
JavaScript实现下拉列表框数据增加、删除、上下排序的方法

本文实例讲述了JavaScript实现下拉列表框数据增加.删除.上下排序的方法.分享给大家供大家参考.具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加.删除.向上.向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用. 运行效果截图如下: 具体代码如下: <title>下拉列表数据上下排序</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function
Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)

ListView控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adapter的用法,加了很多的判断等等等等-.我们先来看看实现的效果吧! 好的,我们新建一个项目LvCheckBox 我们事先先把这两个布局写好吧,一个是主布局,还有一个listview的item.xml,相信不用多说 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/
jQuery实现列表的增加和删除功能

具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> </style> </head> <body> <div> <table style="margin: 10px a
vue2.0实现列表数据增加和删除

本文实例为大家分享了vue2.0实现列表数据增加和删除的具体代码,供大家参考,具体内容如下 css <style> [v-cloak]{ display: none; } table{ width: 800px; border-collapse: collapse; margin: 20px auto; } table th,table td{ background: #0094ff; color: white; font-size: 16px; padding: 5px; text-alig
python列表数据增加和删除的具体实例

1.使用 append 函数来为列表 list 添加数据,默认将数据追加在末尾. # !usr/bin/env python # -*- coding:utf-8 _*- """ @Author:猿说编程 @Blog(个人博客地址): www.codersrc.com @File:python列表list.py @Time:2021/3/22 00:37 @Motto:不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累! ""&quo
.NET下为百度文本编辑器UEditor增加图片删除功能示例

百度的这个编辑器,的确挺好,但也有些,让人不如意的,如每次更新,本来有功能给搞没了,旧版本的代码又不能直接拿过来组合用,对用户来很是不爽.今天下载了目前最新版1.2.5为版本看更新记录,主要是对表格做个修改,我下载用上,我靠,上传图片的删除功能给取消了.把旧版本的删除代码拿过来,不好使,还得我慢慢研究,闹心啊,闹心,折磨我半天. 1.首先修改服务器端ueditor\net下的文件imageManager.ashx,增加图片删除的处理.如下代码的Add部分所示: 复制代码代码如下: <%@ We
ajax php实现给fckeditor文本编辑器增加图片删除功能

工作需要需要fck编辑器的服务器浏览加个图片删除的功能,我们利用ajax php实现的有需要的朋友可以参考下. 在fckeditoreditorfilemanagerbrowserdefault文件夹中找到frmresourceslist.html文件,修改代码如下 oListManager.GetFileRowHtml找到这里,下面代码替换原来的代码复制代码代码如下: oListManager.GetFileRowHtml = function(fileName, fileUrl, fil
php 数组操作(增加，删除，查询，排序)等函数说明第1/2页

数据增加,删除,查询,排序详细说明对数组的添加(首尾数据添加(不限定条数)以及中间任意位置添加数据操作) . 2-对数组的删除(首尾的数据删除(不限定条数)以及中间任意位置的数据删除操作,条件:对数组中间位置删除的,后面的值往前挪,接上以前的位置) . 3-对数据的排序操作(排序操作,要的是效率) . 4-对数组的查询(对数组中的某一数据进行查询,如果满足,则生成新的数组,这个新的数组就是满足查询条件的,条件:查询,并不是查询某一个值,还有查询某一个值满足某个条件,举个例子:查询数组中某个值大
JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能

本文实例讲述了JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能.分享给大家供大家参考,具体如下: 单例模式单例模式的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例单例模式最初的定义出现于<设计模式>(艾迪生维斯理, 1994):"保证一个类仅有一个实例,并提供一个访问它的全局访问点." 单例模式定义:"一个类有且仅有一个实例,并且自行实例化向整个系统提供." var Singleton

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

相关推荐

随机推荐