Vuex 特定路径缓存组件

Vuex 路由特定路径缓存组件

思路来源

做法来源 : 详情
本文主要利用链接文章的第三种做法。
本文目的一是为了帮助自我记忆，二是给出详细步骤做法，以及一些点（本人对于Vue的认识不足所要记录的一些要点)

具体做法

总概述： 如链接文章所说，主要是引入Vuex 作为 全局变量来控制组件的缓存，以及利用 路由跳转涉及到的组件的钩子函数(beforeRouteEnter)。

文档结构

|--src
   |--components
   	  |-- A
   	  |-- B
   	  |-- C
  |-- router
  	  |-- index.js
  |--store
      |--modules
         |--route.js
      |-- index.js
      |-- type.js
|-- App.vue
|-- main.js         

具体步骤

首先先提供 控制 组件缓存用的Vuex 全局变量。
这里我是使用全局常量作为mutation的事件类型.
因此
type.js中

export const MODIFIED_CACHE="MODIFIED_CACHE"

然后定义store
在 route.js中

import {
    MODIFIED_CACHE } from '../type.js'
const state= ()=>({
   
	cache_components:[]
})

const getter= {
   
	// 这里getter 是整个getter,可以拿到getter中的其他getter函数, 这里仅仅是记录，即getter回调 有两个形参
	getCacheName:(state,getter)=>{
   
		const array=state.cache_components;
		return array;
	}
}

const mutations={
   
	// 使用ES2015 风格的计算属性命名功能来使用一个常量作为函数名
	[MODIFIED_CACHE](state,payload) {
   
		if(payload
			&&payload.components
			&&Object.prototype.toString.call(payload.components)
			&& payload.components.length==0
			|| payload.components.length>0