vue2.0组件缓存和vuex辅助函数的理解

vue使用kee-alive缓存组件

​ 1、当组件在使用keep-alive的时候会增加activated、deactivated这两个生命周期钩子函数、

​ 2、需要在引入组件的时候使用keep-alive、并且需要根据条件进行判断、这里使用的是在路由对象中使用keepAlive这个标识进行判断当前渲染的组件是否被缓存

<keep-alive v-show="$route.meta.keepAlive"> 
      <el-col :span="20"><router-view /></el-col>
</keep-alive>
<el-col :span="20"><router-view v-show="!$route.meta.keepAlive" /></el-col>

**注意这里不能使用v-if、使用v-if不会生效（自理解：v-if会影响dom的渲染、keep-alive就无法进行监听和缓存）

mapstate使用

​ 含义：mapState是vuex的语法糖，减少我们在一个组件中大量声明vuex中state的值、简化操作

​ 操作：首先需要从vuex中引入mapState

​

import {mapState} from "vuex"

​ 然后需要在computed计算属性中使用结构语法依次将该组件所需要的state值挂载到计算属性中进行监听

​

...mapState([
			"aaa",
			"bbb",
		]), //  组件中
====================================>//分割线
state:{
		aaa:12,
		bbb:'nb'
	},//vuex中

​ 挂载后直接定义在mastache语法中使用即可，

​ *：使用mapState时依旧可以正常计算所想计算的值

​

computed:	{
		...mapState([
			"aaa",
			"bbb",
		]),
        //正常的计算属性使用依旧适用
		ccc(){
			return this.name
		}
	},