码迷,mamicode.com
首页 > 编程语言 > 详细

vue : 在vuex里写一个数组首尾元素互换的方法

时间:2018-12-20 22:12:27      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:ons   问题   怎样   his   else   div   个数   isarray   tor   

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

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里写一个数组首尾元素互换的方法

标签:ons   问题   怎样   his   else   div   个数   isarray   tor   

原文地址:https://www.cnblogs.com/foxcharon/p/10152632.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!