feat(*): 加入vuex结合完成组件缓存

package.json

@@ -12,7 +12,8 @@
     "normalize.css": "^8.0.1",
     "vant": "^3.0.6",
     "vue": "^3.0.5",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/layout/index.vue

@@ -15,15 +15,16 @@
 
 <script>
 import Tabbar from '@/components/Tabbar'
-import { reactive } from 'vue'
+import { computed } from 'vue'
+import store from '@/store'
 
 export default {
   name: 'Layout',
   components: {
     Tabbar
   },
   setup() {
-    const keepAliveRoutes = reactive(['Demo', 'About'])
+    const keepAliveRoutes = computed(() => store.getters.cachedViews)
 
     return {
       keepAliveRoutes

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import router from './router'
+import store from './store'
 import App from './App.vue'
 
 // normalize.css
@@ -17,4 +18,7 @@ registerVantComp(app)
 import { registerSvgIconComp } from '@/plugins/registerSvgIcon'
 registerSvgIconComp(app)
 
-app.use(router).mount('#app')
+app
+  .use(router)
+  .use(store)
+  .mount('#app')

src/router/index.js

@@ -1,9 +1,15 @@
 import { createWebHashHistory, createRouter } from 'vue-router'
 import routes from './routes'
+import store from '../store'
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  store.commit('cachedView/ADD_CACHED_VIEW', to)
+  next()
+})
+
 export default router

src/router/routes.js

@@ -5,22 +5,31 @@ const routes = [
     path: '/',
     name: 'root',
     component: Layout,
-    redirect: 'demo',
+    redirect: 'Demo',
     children: [
       {
         path: '/demo',
-        name: 'demo',
-        component: () => import('@/views/demo')
+        name: 'Demo',
+        component: () => import('@/views/demo'),
+        meta: {
+          keepAlive: true
+        }
       },
       {
         path: '/tools',
-        name: 'tools',
-        component: () => import('@/views/tools')
+        name: 'Tools',
+        component: () => import('@/views/tools'),
+        meta: {
+          keepAlive: true
+        }
       },
       {
         path: '/about',
-        name: 'about',
-        component: () => import('@/views/about')
+        name: 'About',
+        component: () => import('@/views/about'),
+        meta: {
+          keepAlive: false
+        }
       }
     ]
   }

src/store/getters.js

@@ -0,0 +1,5 @@
+const getters = {
+  cachedViews: state => state.cachedView.cachedViews
+}
+
+export default getters

src/store/index.js

@@ -0,0 +1,18 @@
+import { createStore } from 'vuex'
+import getters from './getters'
+
+// 批量导入 ./modules 目录下的所有模块
+const modulesFiles = require.context('./modules', true, /\.js$/)
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = modulesFiles(modulePath)
+  modules[moduleName] = value.default
+  return modules
+}, {})
+
+const store = createStore({
+  getters,
+  modules
+})
+
+export default store

src/store/modules/cachedView.js

@@ -0,0 +1,26 @@
+const state = {
+  cachedViews: []
+}
+
+const mutations = {
+  ADD_CACHED_VIEW: (state, view) => {
+    // 不重复添加
+    if (state.cachedViews.includes(view.name)) return
+    if (view?.meta?.keepAlive) {
+      state.cachedViews.push(view.name)
+    }
+  },
+  DEL_CACHED_VIEW: (state, view) => {
+    const index = state.cachedViews.indexOf(view.name)
+    index > -1 && state.cachedViews.splice(index, 1)
+  },
+  DEL_ALL_CACHED_VIEWS: state => {
+    state.cachedViews = []
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations
+}