重新对vue的复习

一.vuex的复习

1、控制台出现一些你看不懂的bug一般都是版本号的问题，例如vue2适配的其实是vuex3。

2、vuex是集中管理项目数据的一般常用于兄弟组件传值，一般用于大型项目

3、分为state，action，mutation，getter，module，

①state是用来管理数据的，在普通的的html界面可以直接使$store.state在js里面则需要使用this.$store.state

②action和mutation是用来管理state里面的数据的，action用来处理和获取数据，mutation用来同步更新状态

两者有以下不同:①mutation能直接改变state，action不能直接改变state需要提交给mutation

                          ②mutation:$store.commit  action;$store.dispath.

                          ③action可以写异步方法。

                          ④暴露的是actions和mutations

4、getter是用来获取

5.module进项模态化开发，方便管理，将其分为有很多更含有独立state，action，mutation的，记得要加namespace:true是当前所在下的,

用法$store.state.m1.m1name, 

this.$store.commit("m1/事件名“）

this.$store.dispatch("m1/事件名“）

例如：
modules:
{
 m1:{
namespaced:true,
state:{
m1name
}
actions:{}
mutations:{}
},
 m2:{
namespaced:true,
state:{}
actions:{}
mutations:{}
}
}

6.mapActions的使用，

1.首先引入
import ｛mapActions｝from 'vuex'
2.解构
...mapActions([函数名],参数)  ...mapActions({模块函数名：store函数名})

二、注册组件

可以在main.js配置如下，这样全局都可以使用el-footer，要是需要传数，通过props就可以

import MyFooter from './components/MyFooter.vue'
Vue.component('el-footer',MyFooter)

三、为什么data是函数

四、深度监听

五、keep-alive的妙用

1.keep-alive可以用来提高性能，避免重新加载，例如 可以缓存商品页，跳转之后回到的还是当前位置。

2.如何让缓存，可以通过v-if来判断 在router里面的meta写入键值对来判断是否需要缓存

//不需要缓存
<router-view v-if="!$router.meta.isActive"></router-view>
//需要缓存
<keep-alive v-if="$router.meta.isActive">
<router-view></router-view>
</keep-alive>

3、如何请求缓存可以通过两个生命周期函数例如：activated和deactivated

 六、vue-router的传参

 ​​​​​​