perf(tagsView):split to single modules

src/store/getters.js

@@ -1,8 +1,8 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   language: state => state.app.language,
-  visitedViews: state => state.app.visitedViews,
-  cachedViews: state => state.app.cachedViews,
+  visitedViews: state => state.tagsView.visitedViews,
+  cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,

src/store/index.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
-import user from './modules/user'
 import permission from './modules/permission'
+import tagsView from './modules/tagsView'
+import user from './modules/user'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -10,8 +11,9 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   modules: {
     app,
-    user,
-    permission
+    permission,
+    tagsView,
+    user
   },
   getters
 })

src/store/modules/app.js

@@ -5,9 +5,7 @@ const app = {
     sidebar: {
       opened: !+Cookies.get('sidebarStatus')
     },
-    language: Cookies.get('language') || 'zh',
-    visitedViews: [],
-    cachedViews: []
+    language: Cookies.get('language') || 'zh'
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -21,32 +19,6 @@ const app = {
     SET_LANGUAGE: (state, language) => {
       state.language = language
       Cookies.set('language', language)
-    },
-    ADD_VISITED_VIEWS: (state, view) => {
-      if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push({
-        name: view.name,
-        path: view.path,
-        title: view.meta.title || 'no-name'
-      })
-      if (!view.meta.noCache) {
-        state.cachedViews.push(view.name)
-      }
-    },
-    DEL_VISITED_VIEWS: (state, view) => {
-      for (const [i, v] of state.visitedViews.entries()) {
-        if (v.path === view.path) {
-          state.visitedViews.splice(i, 1)
-          break
-        }
-      }
-      for (const i of state.cachedViews) {
-        if (i === view.name) {
-          const index = state.cachedViews.indexOf(i)
-          state.cachedViews.splice(index, 1)
-          break
-        }
-      }
     }
   },
   actions: {
@@ -55,15 +27,6 @@ const app = {
     },
     setLanguage({ commit }, language) {
       commit('SET_LANGUAGE', language)
-    },
-    addVisitedViews({ commit }, view) {
-      commit('ADD_VISITED_VIEWS', view)
-    },
-    delVisitedViews({ commit, state }, view) {
-      return new Promise((resolve) => {
-        commit('DEL_VISITED_VIEWS', view)
-        resolve([...state.visitedViews])
-      })
     }
   }
 }

src/store/modules/tagsView.js

@@ -0,0 +1,47 @@
+const tagsView = {
+  state: {
+    visitedViews: [],
+    cachedViews: []
+  },
+  mutations: {
+    ADD_VISITED_VIEWS: (state, view) => {
+      if (state.visitedViews.some(v => v.path === view.path)) return
+      state.visitedViews.push({
+        name: view.name,
+        path: view.path,
+        title: view.meta.title || 'no-name'
+      })
+      if (!view.meta.noCache) {
+        state.cachedViews.push(view.name)
+      }
+    },
+    DEL_VISITED_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews.splice(i, 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews.splice(index, 1)
+          break
+        }
+      }
+    }
+  },
+  actions: {
+    addVisitedViews({ commit }, view) {
+      commit('ADD_VISITED_VIEWS', view)
+    },
+    delVisitedViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_VISITED_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    }
+  }
+}
+
+export default tagsView

src/views/example/table/index.vue

@@ -11,7 +11,7 @@ export default {
   name: 'TableMain',
   computed: {
     cachedViews() {
-      return this.$store.state.app.cachedViews
+      return this.$store.state.tagsView.cachedViews
     }
   }
 }

src/views/layout/components/AppMain.vue

@@ -13,7 +13,8 @@ export default {
   name: 'AppMain',
   computed: {
     cachedViews() {
-      return this.$store.state.app.cachedViews
+      // console.log(this.$store.state.tagsView.cachedViews)
+      return this.$store.state.tagsView.cachedViews
     }
     // key() {
     //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()

src/views/layout/components/TagsView.vue

@@ -15,7 +15,7 @@ export default {
   components: { ScrollPane },
   computed: {
     visitedViews() {
-      return this.$store.state.app.visitedViews
+      return this.$store.state.tagsView.visitedViews
     }
   },
   mounted() {