整合的一些 vue中的小知识点

vue.js的两个核心是什么？
数据驱动、组件系统

vue 中 key 值的作用

用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM

vuex是什么？怎么使用？哪种功能场景使用它？

---

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的所有组件的状态，主要是为了多页面、多组件之间的通信。

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

State特性

A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

mutations

mutations定义的方法动态修改Vuex 的 store 中的状态或数据。

Getter特性

A、getters 可以对State进行计算操作，它就是Store的计算属性
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用，是可以不用getters

action

actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

用法：

const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules

项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

修改vant组件样式无法显示的问题

• .vue文件中的style标签内因为scoped的原因，样式只对.vue文件中的template模板标签内的结构有效，引入的第三方vant中的组件是无效的。
• 解决方案：
  定义一个全局的样式文件，例如在src目录中添加一个resetvant.less文件（这里我使用的是less文件，也可以是scss文件或者css文件），专门用来存放vant组件中需要修改的样式。为了便于维护最好使用组件原有的样式类名进行样式修改。最后在main.js文件中全局引入就可以了。

//resetvant.less文件
.homeContainer {
    .van-swipe__track {
        height:200px;
        .van-swipe-item {
            &:nth-child(1){
            background-color: hotpink;
            }
            &:nth-child(2){
            background-color: pink;
            }
            &:nth-child(3){
            background-color: deeppink;
            }
            &:nth-child(4){
            background-color:palevioletred;
            }
        }
    }
}

//main.js文件
//解决vant样式无法覆盖的问题
import './css/resetvant.less'

//homeContainer.vue文件
<template>
    <div class="homeContainer">
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <h1>homeContainer</h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>

</style>