vue走过的那些坑

vue修改数组

当我们想修改原数组的某一个元素的值得时候，并不会使页面动态渲染。

像是这样：

<!-- 截取重要字段 -->
<div v-for=(item ,index) in data>{{item}}</div>
<button @click="change">修改<button>
<script>
data(){
    return {
        data:[1,2,2,3]
    }
}
methods:{
    change(){
        this.data[2] = 5
    }
}
</script>

array[index] = value，vue扫描不到数组的变化。
下面提供了三个解决办法：

this.$set(arrat,index,value) （个人不是很喜欢）
array = newArray (之前用axios做过，但是现在还不是很确定是否可以用)
array.splice(index,1,newValue) (个人推荐)

关于vue中import的那些事

再写vue的项目的时候，import导入其他组件和export的组合是最常用的了。

那么就那我的项目为例子，我的项目导入了iview

import { Button, Table, Message, Input } from 'iview'
import 'iview/dist/styles/iview.css';

可以看到这个组件是从根路径出发的，而且这个路径是从node_moudle这个文件夹内找的，如果不熟悉node_moudle，可以看我之前的vue入门博客。

而且，我们可以看到，导入的组件是拿{}包裹这的，我们要知道，一般的组件像是vue官网上的那些，我们都是不拿{}包裹的。

那么，这两种方式有区别么？

答案是有的，{}导入的组件，需要用export {xxx,xxx,xxx}导出，而不需要{}的则需要用export default 'xxx'导出，而且 default 不可以导出多个，也就是说，我们可以因为某些逻辑将一些组件写在一个js文件中，然后用{}导出

关于vuex传参的一些事情

之前没有说vuex，这里说一下它的传参问题吧。对于我来说,vuex其实就可以看成一个静态的类，类里面分成四个模块

state => 存放data的

getters => get函数，获取变量的

mutataions => set函数，设置变量的

actions => 具体函数实现，比如利用axios之后将数据利用mutations提交的，也算是一个变相的set的函数吧

数据取不到？一直undefined?

本以为按照上面的做法去弄来着，但是当我在做完登陆功能，将token存到state里面，然后在axios封装的js文件将token取出来并且当作header的时候，数据一直是undefined,机智的我发现事情并不这么简单。吓得我马上开始了百度。

不出意料的是，百度总会在将你想要查询的东西替换成你最不想要的结果

查了一顿，啥也没查出来，其实一堆文章都阐述了这个问题，但是他们大多都是将什么token存入到localStorage里面。是的，这也是一个解决办法，不过我以后的getter不还是取不到数据么！

无奈下，打开gayhub,随便down一个大佬的vue项目，偷偷观察下(大佬不愧是大佬，代码结构清晰明了)。我发现大佬们的vuex代码无非是这种结构

moudles -> 存放我们需要的一些数据，但是和上面我们想的不同的是，这些moudles里面并没有getters。而是单独抽出来了一个getters文件
getters -> 抽象出来的getters对象

index -> 注册moudles和getters组件

需要主要的是，这个getters组件是全局的，而我们在moudles里面写的state的局部的，所以仍然还是取不到任何东西，因此我们需要指明moudle名字
例如： avatarId: state => state.user.avatarId 和别的不一样的是，它在state后面又指明了user作用域

mutataions只接受一个参数

这个问题其实困扰了我一会，因为如果你在actions里面写这样的话

commit("xxx", 变量1，变量2)

并且那个xxx的函数是(state,变量1，变量2)的时候，是不会报错的！而且只接收变量1，其余的自动undefined，一开始我还以为是我的变量不对呢，后来才发现是这的原因，不过这样解决办法也很明显了，我们可以弄一个复杂json过去，就像这样

commit("xxx",{1:xx,2:xx})

然后接收的时候正常接收就行，注意！一定用一个变量名接收，血与泪的教训啊。。。。