Vue数据持久化以及动态组件

Vue数据持久化

这里介绍的是Vue项目开发时，因为业务以及交互关系的原因，我们对程序需要做一些状态以及数据的存储，以此避免组件的重复渲染、数据重新请求以及状态丢失，所以这里我记录的是如何在vue项目中持久化数据以及状态

Vue项目中我们一般把数据存储到Vuex的公用仓库中，而vuex有一个痛点就是页面刷新的时候，vuex中的数据会回归，看过一个论坛的网友回复，vuex 是什么时候挂在到vue实例上的呢？ 是创建实例的时候！vuex是跟着实例走的，当页面刷新的时候，会销毁实例重新创建，所以这就是原因

这里提供一个vue的插件，安装命令如下：

npm install vuex-persistedstate

vuex中的仓库管理做如下修改：

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
  modules: {
    app,
    user
  },
  getters,
  plugins: [createPersistedState()]  //加上这个就可以了
})

动态组件

动态组件是使用一个挂载点来动态切换不同组件的内容

vue抛出了动态组件的标签和使用方式，应用方面一般做tab切换、单页面模块切换，如下是它的使用方式

<div>
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>

component是vue提供动态组件切换的内置标签，而自身提供的is属性对应的属性值变量就是加载什么组件的条件，比如我要加载组件comA.vue,那么在组件内部的变量声明就是这样的

import comA from "@/components/comA"
new Vue({
  el: '#example',
  components: {
    comA
  },
  data:{
    index:0,
    currentView:'comA',
  },
  computed:{
   
  },
  methods:{
    change(){
      // ... 
    }
  }
})

保证is属性的属性值变量是组件的名称，这样就可以动态渲染了，而我们要实现动态切换渲染组件的话，就需要导入多个组件，并且在切换函数中，更改变量currentView的值，这样就可以实现动态切换了，

而实现缓存组件内容，这里我介绍一个新的vue抽象组件keep-alive,他可以包裹在component保留组件外层，不过它包裹的组件内容生命周期钩子函数与其它组件不同，所以这里一定要注意缓存组件的函数触发时机，这里提供的方案是在路由元信息中提供变量，在组件内部做watch监听路由变化来判断组件的函数在哪个钩子函数中触发。