浅谈对vue中keep-alive的理解，配合vuex的使用

keepalive中文翻译的意思是：保持活着；
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

1. activated: 在 keep-alive 组件激活时调用，该钩子函数在服务器端渲染期间不被调用
2. deactivated:在 keep-alive 组件停用时调用，该钩子在服务器端渲染期间不被调用

• 因为在我们日常开发中，有些组件是没必要多次init，那么我们就得让组件维持不变，所以在vue中我们可以使用keep-alive来进行组件缓存，可以配合利用vuex进行状态管理。
• 咦，好像说得要点憋扭，举个简单的例子，就比如我们日常逛淘宝：在首页上点击顶部的-搜索，进入搜索页：假如输入“鞋子”，选中一款商品点击进入到详情，然后再返回去到搜索页，返回来你会发现搜索框的内容一直是“鞋子”2字，这里就是运用到keepalive的思想了。那么，我们再返回到首页，搜索框就被清空了。

okay，看下下面的一个简单的例子，就明白了。

创建两个组件，分别是search和detail；
我们先缓存一下search组件，keepAlive:true

{
  path: '/search',
  name: 'Search',
  component: Search,
  meta: {
    keepAlive: true // 需要被缓存
  }
},
{
  path: '/detail',
  name: 'Detail',
  component: Detail,
  meta: {
    keepAlive: false // 不需要被缓存
  }
}

然后在App.vue 输入：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

恩，好，然后我们可以利用vuex状态管理一下
vuex文件夹中的state.js文件

存储状态
const state = {
refreshSearch: true // 标记是否刷新搜索页
}
修改状态
const mutations = {
setRefreshSearch(state, flag) {
  state.refreshSearch = flag;
}
}

serach组件：代码如下

<template>
  <div class="hello">
    <h1>我是搜索页</h1>
    <h2>{{msg}}</h2>
    <input placeholder="输入框" v-model="msg"></input>
    <br>
    <button @click="goDetail()">去详情页</button>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
    export default {
      name: "search",
      data(){
        return {
          msg:''
        }
      },
      // 生命周期钩子activated(),会在keep-alive的组件每次激活时调用
      activated() {
        if (this.refreshSearch) {
          // 若为true，则执行重置页面等相关操作
          this.fetchData()
        } else {
          this.reset(true);
        }
      },
      computed: {
        ...mapState([
          'refreshSearch' // 映射 this.refreshSearch 为 this.$store.state.refreshSearch
        ]),
      },
      methods:{
        fetchData() {
          // 获取页面数据
          this.msg = ''
        },
      ...mapMutations({
          reset: 'setRefreshSearch' // 将 `this.reset()` 映射为 `this.$store.commit('setRefreshSearch')`
        }),

        goDetail() {
          this.reset(false);// 这样返回搜索页的时候，搜索页就不会重置数据了
          this.$router.push({path: '/detail'})
        },
      },
    }
</script>

detail组件不用写什么代码…

操作流程:
假如我们从App.vue 点击按钮进入到search组件，输入“鞋子”2字，再进入到详情页，在返回到search组件，你会发现搜索框的内容还是“鞋子”，然后你在回到首页，在进来搜索页，你会发现搜索框文字被清空了。
第一步：打开首页

第二步：进入到搜索页，假如输入“鞋子”

第三步：输入完搜索的文字，点击上方详情页按钮，进入到了详情页

第四步：然后你再返回到搜索页，搜索框的文字”鞋子“还在，

第五步，返回到首页，然后再进来搜索页，搜索框状态就还原了

大概是这个意思…应该比较清楚了。