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 ...
随机推荐
- 修改VirtualBox中mac的分辨率
转自 http://www.ztyhome.com/virtualbox-mac-fen-bian-lv/?replytocom=3162 最近在windows上用VirtualBox安装了MAC o ...
- Spring如何解决循环依赖?
介绍 先说一下什么是循环依赖,Spring在初始化A的时候需要注入B,而初始化B的时候需要注入A,在Spring启动后这2个Bean都要被初始化完成 Spring的循环依赖有两种场景 构造器的循环依赖 ...
- redis高级命令3哨兵模式
redis的哨兵模式 现在我们在从服务器1.222上让该从服务器作为哨兵 首先将redis安装包文件下的sentinel.conf文件复制到/usr/local/redis/etc目录下 然后修改se ...
- 基于flink和drools的实时日志处理
1.背景 日志系统接入的日志种类多.格式复杂多样,主流的有以下几种日志: filebeat采集到的文本日志,格式多样 winbeat采集到的操作系统日志 设备上报到logstash的syslog日志 ...
- Docker搭建Rancher平台
sudo docker run -d --restart=unless-stopped -p 8080:8080 rancher/server service docker resatrt启动失败 ...
- python用pandas遍历csv文件
import pandas as pd df = pd.read_csv('a.csv') for index, row in df.iterrows(): x, y = row['X'], row[ ...
- 扯淡 Spring BeanDefinition
相关文章 Spring 整体架构 编译Spring5.2.0源码 Spring-资源加载 Spring 容器的初始化 Spring-AliasRegistry Spring 获取单例流程(一) Spr ...
- 【Xamarin.Forms 3】页面类型
系列目录 微信 1.[Xamarin.Forms 1]App的创建与运行 2.[Xamarin.Forms 2]App基础知识与App启动 知乎 1.[Xamarin.Forms 1]App的创建与运 ...
- 2020年学习目标之一——emacs
这两天在虚机里面安装了centos7(gnome),决定后续自己的学习一直在这个里面进行,对于编辑器我最后选择了emacs,新手一枚,不过正好也算是今年的一项学习目标吧,加油! (完)
- elasticsearch7.6 安装 并且开启外网访问,真的好累。
下载 下载页面 https://www.elastic.co/cn/downloads/elasticsearch wget https://artifacts.elastic.co/download ...