Vue开发小芝士记录

作为一个后端，前端使用得比较少，但是由于毕设需要，也只能尽量去学习，记录一下易忘的、重要的、常用的一些知识点。

1.路由跳转

使用router-link

<router-link to="/home">首页</router-link>

使用push方法

//普通用法

this.$router.push("/home")

//带参数，万能写法，推荐!

this.$router.push({

      name: "search",

      params: { keyword: this.keyword },

       query: { categoryName: this.categoryName },

 });

2.路由变化监听

我们经常在编程层面为了减少代码量，充分复用，会经常出现页面复用，比如添加和更新的页面可能一样，只是更新的时候有个初始数据，这样就可能会出现在两个页面之间切换时遗留上次的值，这时候需要监听路由变化。

watch: {
    $route(to,from) {
      //初始化页面数据
    }
  },

还有一种情况，当我们从页面/detail/1通过router-link跳到页面detail/2的时候，这时候也会出现页面数据遗留未更新的问题（因为mounted中的初始化函数并没有再执行），这时候即使使用上面的方式也监听不到路由改变，因为这里只是路由参数改变了，所以需要深度监听，如下：

  watch:{
    $route: {
      handler: function (val, oldVal){
        //获取数据初始化
      },
      // 深度观察监听，这个才能监听到路由参数param的变化
      deep:  true
   }

3.选中样式

我们经常会遇到需求，就是鼠标点击某个选项，某个选项就有选中颜色。

比如如下选中了之后就是紫色：

我们假如这个紫色选中的样式为active

那么我们只需要与class绑定，然后带上条件判断即可。

一般写法是

:class="{ active: expression } 

其中expression为结果为布尔类型的表达式，如果为真，这个样式就生效，这样就可以控制每个选项的选中样式了。

4.一些巧妙便利的函数

4.1Object.assign(target, ···source)

一个目标对象，允许多个源对象，用于对象拷贝，很像java中的BeanUtil中的copyProperties

4.2every()

一般用于判断一个对象列表中的某个属性是否满足某项要求，比如我要查看购物车中商品是否都被选中，如下：

this.cartList.every((item) => item.checked == 1) && this.cartList.length>0

4.3split()

如果经常使用mapReduce、spark、flink的对这个函数一定不陌生了，一般从文件读取数据进行处理都会使用split分隔数据进行格式化处理。

前端一般经常会以-、/、：分隔的数据，所以使用这个频率较多。

4.4indexOf()

content.indexOf(str)

检索content是否包含字符串str，如果包含返回第一个字母在content中的索引，不包含则返回-1，

所以一般用content.indexOf(str) != -1来判断content和str是否包含或者相等

4.5splice

这个函数参数比较多，这里我主要介绍一种常用的用法，配合indexOf使用能够快速实现删掉数组中的某个元素。

this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)

如上图所示就是一个比较常见的删除标签的例子，先用indexOf得到待删除标签在数组中的索引位置，然后调用splice函数从该索引位置起删除一个元素，这样就完成了在数组中删除该元素。

5.Vuex

vuex的使用比较八股文，初学者可能被各种state，mutations，actions，getters给弄糊涂了，其实这个就跟后端dao(mapper)、service、controller差不多的八股文式“三连环”，写多了自然就熟练，其实技术含量并不算很高。

5.1state

在state中定义我们需要管理的数组、对象、字符创等等，把需要做状态管理的量放到这里。

5.2mutations

专门用于操作state数据的方法的集合，比如对该数据的修改、增加、删除等等

5.3actions

action一般用于提交mutations，即一般从后端获取数据，就派发一个action，然后将获取的数据提交mutations用于修改状态state相应的值

5.4getters

有点类似于computed函数，用于简化、计算仓库的数据。

5.5常用

也就是说一般情况下，我们都会使用一个模板似的三连环，先派发action获取后端数据，然后提交给mutations，mutations修改state中的状态值。得到这个状态值之后，那么怎么获取呢？一般有两种获取方式：

import { mapGetters, mapState} from "vuex"

第一种是通过mapState获取

computed: {
    ...mapState({
      recommendBrand:state => state.detail.recommendBrand,
    })
  },

第二种是通过mapGetters获取。前提是使用了getters，才能使用这个。

//简化仓库中的数据
const getters = {
  detail(state) {
    return state.goodInfo.detail || {}
  },
}

computed: {
    ...mapGetters(["detail"]),
  },

6.关于el-row和el-col布局

el-row中有参数gutter，el-col中有参数span，其实我感觉只要用好了el-row，el-col那么大部分简单布局都没什么问题了，首先解释一下gutter，就是代表每个el-col之间的距离。对于span这个参数，我们需要了解一个概念，就是我们这一行一共有24栏，如果我们想放4个物体，那就每个6栏，如果想放两个，就每个12栏。

<el-row :gutter="10">

      <!-- 24栏每人占6栏 -->

      <el-col :span="6">

      </el-col>

      <el-col :span="6">

      </el-col>

      <el-col :span="6">

      </el-col>

      <el-col :span="6">

      </el-col>

</el-row>

结果如下：

<el-row :gutter="10">
   <el-col :span="12">

   </el-col>
   <el-col :span="12">
        
   </el-col>
</el-row>

 结果如下：

 7.切换页面时，页面保持上个页面的滚动条位置，没有回到最上面

使用scrollBehavior即可解决

//配置路由
let router = new VueRouter({
  //配置路由
  //名称和值一样就可以省略写
  routes,
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    //y为0表示滚动条在最上方
    return { y: 0 }
  }
})