不着急上代码,先想几个问题。

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里写一个数组首尾元素互换的方法的更多相关文章

  1. Vue折腾记 - (3)写一个不大靠谱的typeahead组件

    Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...

  2. vue多个input绑定一个数组变量问题

    对于data中声明的一个数组变量arr=[],在绑定时候可以如下: <div style="margin-top: 10px;margin-left: 40px;"> ...

  3. 写一个针对IQueryable<T>的扩展方法支持动态排序

    所谓的动态排序是指支持任意字段.任意升序降序的排序.我们希望在客户端按如下格式写: localhost:8000/api/items?sort=titlelocalhost:8000/api/item ...

  4. C#把某个数组的一部分复制到另一个数组中的两种方法:Buffer.BlockCopy和Array.Copy

    static void Main(string[] args) { , , , , , }; ;//目标数组大小 int int_size = sizeof(int);//用于获取值类型的字节大小. ...

  5. AngularJS中写一个包裹HTML元素的directive

    有这样的一个场景,这里有一个表单: <form role="form">    ...</form> 我们希望在form的外层动态包裹上一层. 有可能是这样 ...

  6. 写一个xml文件到磁盘的方法

    /** * 往磁盘上写一个xml文件 * * <?xml version="1.0" encoding="UTF-8" standalone=" ...

  7. 自己写一个与startWith类似的判断方法

    package com.hanqi.lianxi; import java.util.Scanner; public class startWith {        //自己顶一个与startWit ...

  8. 改变一个数组内元素的位置,不通过splice方法。

    这个数据 现在已经完成了,将本来在第一位的18代金券改到第31位,下面说一下怎么实现的. //currHotRightsTypeSorted这个是数据源头,legalRightsType这个是数据的分 ...

  9. Js删除数组重复元素的多种方法

    js对数组元素去重有很多种处理的方法,本篇文章中为网络资源整理,当然每个方法我都去实现了:写下来的目的是希望自己活学活用,下次遇到问题后方便解决. 第一种 function oSort(arr){ v ...

随机推荐

  1. 利用bat文件打开浏览器指定网页,提示 windows找不到chrome.exe。请确定文件名是否正确,再试一次 的解决经历

      1.在网上找到一些bat命令,原来电脑可以正常使用,效果就是执行后打开谷歌浏览器并全屏展示某网页,但是在昨天换个一个电脑后发现不能用了,提示以下截图的错误 2.找了半天发现问题所在: 把chrom ...

  2. Java开发中的23种设计模式详解(收藏-转)

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  3. 使用docker创建rocketMQ容器

    一.rocketMQ安装 (一)安装NameSrv 1.创建nameSrv数据挂载文件夹 mkdir -p /usr/data/rocketMQ/data/namesrv/logs mkdir -p ...

  4. ajax前后端交互原理(1)

    1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...

  5. 11. RobotFramework内置库-Collections

    Collections库是RobotFramework用来处理列表和字典的库,详细可参见官方介绍. 官方地址:http://robotframework.org/robotframework/late ...

  6. 02 . 分布式存储之FastDFS 高可用集群部署

    单节点部署和原理请看上一篇文章 https://www.cnblogs.com/you-men/p/12863555.html 环境 [Fastdfs-Server] 系统 = CentOS7.3 软 ...

  7. 常用API - 字符串

    String类 java.lang.String类代表字符串 Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. 特点 字符串的内容不可变!! 因为 St ...

  8. 一文搞定 Spring Data JPA

    Spring Data JPA 是在 JPA 规范的基础上进行进一步封装的产物,和之前的 JDBC.slf4j 这些一样,只定义了一系列的接口.具体在使用的过程中,一般接入的是 Hibernate 的 ...

  9. unity position 记录

    localPosition为自身矩形中心点(Pivot)与其父节点矩形中心点(Pivot)的相对位置坐标,与自身锚点(Anchors)无关.anchoredPosition为矩形中心点(Pivot)与 ...

  10. 小师妹学JVM之:JVM中的Safepoints

    目录 简介 GC的垃圾回收器 分代回收器中的问题 safepoints safepoint一般用在什么地方 总结 简介 java程序员都听说过GC,大家也都知道GC的目的是扫描堆空间,然后将那些标记为 ...