踩坑记10 vue3、vuex4、组件化

2021.8.4

使用vuex4替换emit。进行组件化。

坑32（vuex4、keep-alive、el-tabs、标签页，缓存）：背景是需要进行组件化，标签页组件将被多层嵌套，之后emit将不再适用(用起来需要多层传递)。

以下是之前的操作，主要使用emit传递打开着的标签页信息：

前传1（keep-alive基础使用）： 踩坑记3 keep-alive 缓存、el-tabs 获取点击前后的参数 等_Alloom的博客-优快云博客；

前传2（keep-alive+emit保存标签页打开着的组件）： 踩坑记4 keep-alive、emit 仅保存标签页打开的组件_Alloom的博客-优快云博客。

现在改用vuex4。首先是目录结构，新建store文件（与router文件平级），内新建index.js、mutations.js、actions.js文件以及modules.js文件夹（内放模块文件，例如layout.js）。actions.js和module.js暂时未用到。参考： 项目结构 | Vuex (vuejs.org)

以下是index.js，keepComponents即为保存缓存的组件名数组，该文件导出将作为store使用：

import { createStore } from 'vuex'
import mutations from './mutations'
// import actions from './actions'
// import layoutModule from './mod