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 ...
随机推荐
- Python的多继承问题-MRO和C3算法
大部分内容转载自C3 线性化算法与 MRO 理解Python中的多继承 Python 中的方法解析顺序(Method Resolution Order, MRO)定义了多继承存在时 Python 解释 ...
- C#多线程编程(一)进程与线程
一. 进程 简单来说,进程是对资源的抽象,是资源的容器,在传统操作系统中,进程是资源分配的基本单位,而且是执行的基本单位,进程支持并发执行,因为每个进程有独立的数据,独立的堆栈空间.一个程序想要并发执 ...
- Spring Boot入门系列(十五)Spring Boot 开发环境热部署
在实际的项目开发过中,当我们修改了某个java类文件时,需要手动重新编译.然后重新启动程序的,整个过程比较麻烦,特别是项目启动慢的时候,更是影响开发效率.其实Spring Boot的项目碰到这种情况, ...
- 面试题40:最小的 k 个数
import java.util.Arrays; /** * Created by clearbug on 2018/2/26. * * 面试题40:最小的 k 个数 * * 注意:因为前两天在陌陌面 ...
- Jmeter系列(30)- 详解 JDBC Request
如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 前言 JDBC Request 主要是 ...
- Selenium+Python调Chrome浏览器时报Traceback (most recent call last): File "C:/Users/EDZ/Desktop/selenium_demo/demo001.py", line 12, in <module>
上次使用Selenium+Python还是好几个月前了 今天想再用一下,结果写个打开网站的小demo报错,报错如下: 检查了一下,查看报错日志,应该是chrome版本和driver版本不一致导致的. ...
- SpringBoot--swagger搭建、配置及使用
一. 作用: 1. 接口的文档在线自动生成. 2. 接口测试. 二.模块介绍 Swagger是一组开源项目,其中主要要项目及功能如下: 1.Swagger Codegen: 通过Codegen 可以将 ...
- 平时自己常用的git指令
增删改查 创建标签 $ git tag -a v1.4 -m 'my version 1.4' 用 -a (译注:取 annotated 的首字母)指定标签名字即可 -m 选项则指定了对应的标签说明 ...
- vue全家桶(3.3)
4.7.作为vue的插件使用 在vue中,我们不需要在每个组件中都去引入axios,这样使用起来比较麻烦,我们可以结合插件vue-axios,让操作更简化 1.安装插件 npm install vue ...
- dup与dup2函数
依赖的头文件 #include <unistd.h> 函数定义 int dup(int oldfd); int dup2(int oldfd, int newfd); 函数作用 dup和d ...