vue : 在vuex里写一个数组首尾元素互换的方法
不着急上代码,先想几个问题。
vuex里怎么写方法?
mutation里写vuex方法,组件中用commit调用。
数组首尾元素怎么互换?
arr.splice(0, 0, arr[arr.length - 1])
arr.pop()
怎样让这个方法是可复用的?
组件中commit的时候提交想改的数组名字,并在vuex方法中进行检测。
需要检测啥?
1 state中是否存在这个变量
2 这个变量是不是一个符合要求(length > 1)的数组?
怎样检测是否存在这个变量?
Object.keys(state) 遍历 state变量名,如果能找到和提交的变量名相同的,则是合法的。
怎样检测这个变量是否符合要求?
Array.isArray(arr) && arr.length > 1
好了,可以上代码了。
vuex mutation:
swapArrayFirstAndLast(state, name){
// console.log("name", name)
// console.log(Object.keys(state))
const stateNameArr = Object.keys(state)
for (let x in stateNameArr) {
// console.log(stateNameArr[x])
if (stateNameArr[x] === name) {
if (Array.isArray(state[name]) && state[name].length > 1) {
// console.log("===bingo===")
let arr = state[name]
arr.splice(0, 0, arr[arr.length - 1])
arr.pop()
break
} else {
return
}
}
}
}
component.vue:
this.$store.commit('swapArrayFirstAndLast', 'aSimpleArray')
以上。
vue : 在vuex里写一个数组首尾元素互换的方法的更多相关文章
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...
- vue多个input绑定一个数组变量问题
对于data中声明的一个数组变量arr=[],在绑定时候可以如下: <div style="margin-top: 10px;margin-left: 40px;"> ...
- 写一个针对IQueryable<T>的扩展方法支持动态排序
所谓的动态排序是指支持任意字段.任意升序降序的排序.我们希望在客户端按如下格式写: localhost:8000/api/items?sort=titlelocalhost:8000/api/item ...
- C#把某个数组的一部分复制到另一个数组中的两种方法:Buffer.BlockCopy和Array.Copy
static void Main(string[] args) { , , , , , }; ;//目标数组大小 int int_size = sizeof(int);//用于获取值类型的字节大小. ...
- AngularJS中写一个包裹HTML元素的directive
有这样的一个场景,这里有一个表单: <form role="form"> ...</form> 我们希望在form的外层动态包裹上一层. 有可能是这样 ...
- 写一个xml文件到磁盘的方法
/** * 往磁盘上写一个xml文件 * * <?xml version="1.0" encoding="UTF-8" standalone=" ...
- 自己写一个与startWith类似的判断方法
package com.hanqi.lianxi; import java.util.Scanner; public class startWith { //自己顶一个与startWit ...
- 改变一个数组内元素的位置,不通过splice方法。
这个数据 现在已经完成了,将本来在第一位的18代金券改到第31位,下面说一下怎么实现的. //currHotRightsTypeSorted这个是数据源头,legalRightsType这个是数据的分 ...
- Js删除数组重复元素的多种方法
js对数组元素去重有很多种处理的方法,本篇文章中为网络资源整理,当然每个方法我都去实现了:写下来的目的是希望自己活学活用,下次遇到问题后方便解决. 第一种 function oSort(arr){ v ...
随机推荐
- 多语言工作者の十日冲刺<1/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--第一天(04.30) 作业正文 ...
- Mysql Workbench中EER Diagram逆向生成表
选择链接 选择需要生成的表
- Day10-微信小程序实战-交友小程序-自定义callPhone 和copyText组件
---为了方便用户可以拨打电话和复制微信号(下面就要实现这样的两个功能) 注意:在小程序中是没办法直接的添加用户的微信的,所以就只能是复制微信号 (这种东西的话可以直接去做,也可以做成组件,做出组件的 ...
- 【asp.net core 系列】12 数据加密算法
0. 前言 这一篇我们将介绍一下.net core 的加密和解密.在Web应用程序中,用户的密码会使用MD5值作为密码数据存储起来.而在其他的情况下,也会使用加密和解密的功能. 常见的加密算法分为对称 ...
- [ C++ ] set_new_handler解析
当 operator new 中malloc返回值为0(NULL)时,表示分配内存失败(可能是因为内存不足), 此时会通过_callnewh()调用用户通过set_new_handler()设定的ne ...
- activiti学习笔记二
上一篇文章大概讲了下什么是流程引擎,为什么我们要用流程引擎,他的基本原理是啥,以及怎么进行基本的使用,这篇文章我们再讲下其他的一些使用. 删除流程部署 package activiti02; impo ...
- Spring IoC 循环依赖的处理
前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 是 ...
- AcWing 走廊泼水节 题解
这道题大致题意就是让一棵树任意两点有连边(也就是完全图),但是补完后最小生成树是一开始的那棵树,问最小加的边权之和是多少. 了解题意后,我们可以想到用Kruskal(废话),当每两个集合合并的时候,除 ...
- Tomcat的介绍
Tomcat简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选. 支持Se ...
- RSS阅读器推荐
http://www.feeddemon.com/ Windows,Free (完)