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

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,如何高效用Python挣钱

    本人在1年半之前,不熟悉Python(不过有若干年Java开发基础),由于公司要用Python,所以学习了一通.现在除了能用Python做本职工作外,还出了本Python书,<基于股票大数据分析 ...

  2. 【WebLogic使用】3.WebLogic配置jndi数据源

    参见博客:https://blog.csdn.net/acmman/article/details/70146603 参考视频教程: 一.什么是jndi数据源JNDI是Java命名与目录接口(Java ...

  3. python 之 数据类型初接触

    python 之 数据类型初接触 标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dicti ...

  4. ⚡ vue3 全家桶体验

    前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...

  5. 【MyBtis】获取数据插入postgresql后返回的自增id

    问题描述 数据库采用的是postgresql,以下面的rule表为例,该表的id设置为自增,那么经常有这样的需求,在执行insert操作后,紧接着需要获取该记录的自增id往中间表中插入数据,或者是再根 ...

  6. 版本管理工具(git)

    Git是一个开源的分布式版本控制系统 工作区: 电脑目录中,git_test文件夹就是一个工作区. 版本库: 在进行git操作的时候,会生成一个隐藏目录.git,这是git的版本库,其中stage(或 ...

  7. 干!垃圾微软!发布我的Netcore跨平台UI框架 CPF

    什么鬼,我的CPF快写好了,你居然也要搞跨平台UI框架?什么Maui? 之前怎么不早说要搞跨平台UI框架呢?看到谷歌搞flutter眼红了?明年年底发布?又搞这种追别人屁股的烂事情. 什么MVU模式? ...

  8. 主流App自动化测试框架对比

        1.主流App自动化测试框架对比 2.Appium自动化测试框架 官方网址:http://appium.io/ 跨架构:支持原生.混合以及web移动应用 跨平台:Android & I ...

  9. 多种CSS变量技术 带入进入老司机行业

    CSS 变量技术 具体用法 使用 -- 声明变量,使用 var() 函数获取变量. :root{ --header-height: 70px; } body { --color: white; } . ...

  10. directive 实例讲解

    http://my.oschina.net/ilivebox/blog/289670 gulp-nodemon http://www.zhihu.com/question/32123388?sort= ...