vuex的getter中加一条：场景分组的拓扑结构

src/Store/index.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import browser from "@/utils/browser";
+import browser from "@/utils/browser"
+import { deepClone } from "@/utils/other.js";
 
 Vue.use(Vuex)
 
@@ -9,20 +10,20 @@ const store = new Vuex.Store({
   state: {
     userAvatar: '',
     userNickName: '',
-    
-    info:'',
-    backupInfo:'',
-    showInfo:'',
-    hotspot:'',
-    backupHotSpot:'',
-    initScene:'',
-    tablist:[],
-    temptablist:[],
-    vrlist:[],
-    allVrlist:[],
-    sceneList:[],
-    activeItem:'',
-    isEditing:false,
+
+    info: '',
+    backupInfo: '',
+    showInfo: '',
+    hotspot: '',
+    backupHotSpot: '',
+    initScene: '',
+    tablist: [],
+    temptablist: [],
+    vrlist: [],
+    allVrlist: [],
+    sceneList: [],
+    activeItem: '',
+    isEditing: false,
     isShow: false,
 
     uploadStatusListAudio: [],
@@ -34,20 +35,55 @@ const store = new Vuex.Store({
     userAvatar: state => state.userAvatar,
     userNickName: state => state.userNickName,
 
-    isEditing:state=>state.isEditing,
-    info:state=>state.info,
-    showInfo:state=>state.showInfo,
-    backupInfo:state=>state.backupInfo,
-    hotspot:state=>state.hotspot,
-    backupHotSpot:state=>state.backupHotSpot,
-    initScene:state=>state.initScene,
-    activeItem:state=>state.activeItem,
-    vrlist:state=>state.vrlist,
-    tablist:state=>state.tablist,
-    temptablist:state=>state.temptablist,
-    sceneList:state=>state.sceneList,
-    isShow:state=>state.isShow,
-    allVrlist:state=>state.allVrlist,
+    isEditing: state => state.isEditing,
+    info: state => state.info,
+    catalogTopology: (state) => {
+      if (!state.info) {
+        return
+      }
+      //四层：root，level1（一级分类），level2（二级分类或直属于一级分类的场景）, level3(场景)
+      let root = deepClone(state.info.catalogRoot)
+      // 对于每个一级分类
+      for (const itemLevel1 of root) {
+        // 指定每个一级分类的下级
+        itemLevel1.childrenTemp = []
+        for (const itemLevel2Id of itemLevel1.children) {
+          for (const catalogsItem of state.info.catalogs) {
+            if (itemLevel2Id === catalogsItem.id) {
+              itemLevel1.childrenTemp.push(deepClone(catalogsItem))
+              
+              // 对于该二级分类
+              const itemLevel2 = itemLevel1.childrenTemp[itemLevel1.childrenTemp.length - 1]
+              itemLevel2.children = []
+              // 对于每个三级分类
+              for (const itemLevel3 of state.info.scenes) {
+                // 如果属于上述二级分类
+                if (itemLevel2.id === itemLevel3.category /* 注意拼写！！！ */) {
+                  itemLevel2.children.push(deepClone(itemLevel3))
+                }
+              }
+              
+              break
+            }
+          }
+        }
+        itemLevel1.children = itemLevel1.childrenTemp
+        delete itemLevel1.childrenTemp
+      }
+      return root
+    },
+    showInfo: state => state.showInfo,
+    backupInfo: state => state.backupInfo,
+    hotspot: state => state.hotspot,
+    backupHotSpot: state => state.backupHotSpot,
+    initScene: state => state.initScene,
+    activeItem: state => state.activeItem,
+    vrlist: state => state.vrlist,
+    tablist: state => state.tablist,
+    temptablist: state => state.temptablist,
+    sceneList: state => state.sceneList,
+    isShow: state => state.isShow,
+    allVrlist: state => state.allVrlist,
 
     uploadStatusListAudio: state => state.uploadStatusListAudio,
     uploadStatusListImage: state => state.uploadStatusListImage,
@@ -65,7 +101,7 @@ const store = new Vuex.Store({
         state.userNickName = nickName
       }
     },
-    
+
     SetTabList(state, list) {
       state.tablist = list
     },
@@ -98,19 +134,19 @@ const store = new Vuex.Store({
     },
     SetInfo(state, data) {
       state.info = data
-      this.commit("BackupInfo", browser.CloneObject(data));
+      this.commit("BackupInfo", browser.CloneObject(data))
     },
     BackupInfo(state, data) {
       state.backupInfo = data
     },
     SetHotspot(state, data) {
       state.hotspot = data
-      this.commit("BackupHotSpot", browser.CloneObject(data));
+      this.commit("BackupHotSpot", browser.CloneObject(data))
     },
     BackupHotSpot(state, data) {
       state.backupHotSpot = data
     }
-    
+
   },
   actions: {
     refreshUserInfo(context) {

src/utils/other.js

@@ -77,4 +77,38 @@ export function debounce(fn, delay, isImmediateCall = false) {
 export function isValidPhoneNumber(value) {
   const reg = /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/
   return reg.test(value)
+}
+
+// 深拷贝
+export function deepClone(target) {
+  // 定义一个变量
+  let result
+  // 如果当前需要深拷贝的是一个对象的话
+  if (typeof target === 'object') {
+    // 如果是一个数组的话
+    if (Array.isArray(target)) {
+      result = [] // 将result赋值为一个数组，并且执行遍历
+      for (let i in target) {
+        // 递归克隆数组中的每一项
+        result.push(deepClone(target[i]))
+      }
+      // 判断如果当前的值是null的话；直接赋值为null
+    } else if (target === null) {
+      result = null
+      // 判断如果当前的值是一个RegExp对象的话，直接赋值    
+    } else if (target.constructor === RegExp) {
+      result = target
+    } else {
+      // 否则是普通对象，直接for in循环，递归赋值对象的所有值
+      result = {}
+      for (let i in target) {
+        result[i] = deepClone(target[i])
+      }
+    }
+    // 如果不是对象的话，就是基本数据类型，那么直接赋值
+  } else {
+    result = target
+  }
+  // 返回最终结果
+  return result
 }