[vue3进阶] 8.keepAlive

Posted 2023-03-24

参考技术A keep-alive是vue自带的一个标签，用keep-alive包裹的组件，在这个组件不活动时，vue会自动缓存这个组件，而不是销毁它，
举一个例子

在showAdd的值变化时，add-hero和hero-list两个组件进行切换，
因为有keep-alive标签包裹，不显示的组件不会被销毁，vue把它缓存了起来，
在vue开发者工具中可以看出来

这时add-hero这个组件没有显示，在开发者工具里显示是灰色，后面inactive表示是非激活态

对比一下不用keep-alive的情况

在add-hero这个组件不显示时，在开发者工具的组件树里根本没有这个组件。

我们之前在学习vue-router时，给每个路由都写了meta，里面写了keepAlive，现在是用它的时候了，

打开我们之前学习vue-router时写的项目，这次主要修改集中在App.vue中，更改<router-view>标签
跟之前vue2时候写法区别比较大
现在要把keepAlive写在router-view里面，使用作用域插槽获得页面组件

这样就相当于缓存了所有页面
slotProps其实是一个对象，所以也可以用对象解构的语法

这样写简洁一点

下一步就要用上我们meta里面配置的keepAlive

按照更vue2类似的写法，根据keepAlive来判断，是true的话，使用keep-alive标签里面的组件
是false的话使用keep-alive标签外面的组件
但是点击跳转时却报错了

然后根据网上的解决办法，给它们加上key，key是唯一不重复的，那我们之前写的name属性就派上用场了

现在就实现了页面跳转缓存，并且在router.js中配置就可以控制了

还有一个种方式就是使用keep-alive标签的include属性
原文： https://www.jianshu.com/p/b324bdd73556

这样写好像更优雅一点
这个方法有一点需要注意一下，keep-alive标签的include属性是根据组件的name判断的，所以index.vue和list.vue等页面vue文件里一定要写上名字，并且与router.js中使用的name一样
比如index.vue，定义name是index

页面缓存后，再次进入页面，那么它的mounted之类的生命周期函数是不会再次调用的，
这时候可以取消页面缓存，就是把这个页面配置meta时，把keepAlive设置为false
还有一种方式可以监听路由的变化，

这样缓存后，再次进页面就会触发侦听，就可以根据this.$route判断，然后做一些操作
关于keepAlive的内容就是这些了

浅谈vue项目进阶开发-vuex篇

参考技术A 1.vuex的优缺点

2..vuex的使用

先上目录结构：

​

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（操作数据的指令）

处理数据，操作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this.$store.commit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些操作在mutations中处理

这里的参数 context 是对象commit, state,后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutations.js文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1.js

mod2.js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：
将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3.vuex的注意点

a.在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b.使用vuex我们在组件内更改数据是无效的。例如：this.$store.state.name=‘小明‘，这么做会报错。