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

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. Python的多继承问题-MRO和C3算法

    大部分内容转载自C3 线性化算法与 MRO 理解Python中的多继承 Python 中的方法解析顺序(Method Resolution Order, MRO)定义了多继承存在时 Python 解释 ...

  2. C#多线程编程(一)进程与线程

    一. 进程 简单来说,进程是对资源的抽象,是资源的容器,在传统操作系统中,进程是资源分配的基本单位,而且是执行的基本单位,进程支持并发执行,因为每个进程有独立的数据,独立的堆栈空间.一个程序想要并发执 ...

  3. Spring Boot入门系列(十五)Spring Boot 开发环境热部署

    在实际的项目开发过中,当我们修改了某个java类文件时,需要手动重新编译.然后重新启动程序的,整个过程比较麻烦,特别是项目启动慢的时候,更是影响开发效率.其实Spring Boot的项目碰到这种情况, ...

  4. 面试题40:最小的 k 个数

    import java.util.Arrays; /** * Created by clearbug on 2018/2/26. * * 面试题40:最小的 k 个数 * * 注意:因为前两天在陌陌面 ...

  5. Jmeter系列(30)- 详解 JDBC Request

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 前言 JDBC Request 主要是 ...

  6. 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版本不一致导致的. ...

  7. SpringBoot--swagger搭建、配置及使用

    一. 作用: 1. 接口的文档在线自动生成. 2. 接口测试. 二.模块介绍 Swagger是一组开源项目,其中主要要项目及功能如下: 1.Swagger Codegen: 通过Codegen 可以将 ...

  8. 平时自己常用的git指令

    增删改查 创建标签 $ git tag -a v1.4 -m 'my version 1.4' 用 -a (译注:取 annotated 的首字母)指定标签名字即可 -m 选项则指定了对应的标签说明 ...

  9. vue全家桶(3.3)

    4.7.作为vue的插件使用 在vue中,我们不需要在每个组件中都去引入axios,这样使用起来比较麻烦,我们可以结合插件vue-axios,让操作更简化 1.安装插件 npm install vue ...

  10. dup与dup2函数

    依赖的头文件 #include <unistd.h> 函数定义 int dup(int oldfd); int dup2(int oldfd, int newfd); 函数作用 dup和d ...