qjkankan_v1.1.1/packages/qjkankan-editor/src/Store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import browser from "@/utils/browser"
import { deepClone } from "@/utils/other.js";

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userAvatar: '',
    userNickName: '',

    info: '',
    backupInfo: '',
    showInfo: '',
    hotspot: '',
    backupHotSpot: '',
    initScene: '',
    tablist: [],
    temptablist: [],
    vrlist: [],
    allVrlist: [],
    activeItem: '',
    isEditing: false,
    isShow: false,

    uploadStatusListAudio: [],
    uploadStatusListImage: [],
    uploadStatusListPano: [],
    uploadStatusListVideo: [],

    // 编辑器-导航-场景导航中，拖拽时要用到
    editorNavDragInfo: {
      type: '', // 'topologyGroupLevel1': 拓扑结构中一级分组；'topologyGroupLevel2': 拓扑结构中二级分组；'scene': 场景（全景图和三维场景）
      node: {},
    }
  },
  getters: {
    userAvatar: state => state.userAvatar,
    userNickName: state => state.userNickName,

    isEditing: state => state.isEditing,
    info: state => state.info,
    catalogTopology: (state) => {
      if (!state.info || !state.info.catalogRoot || !state.info.catalogs) {
        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) {
              const itemLevel2 = deepClone(catalogsItem)
              itemLevel2.parentId = itemLevel1.id // 看起来，vuex getter中的数据如果存在循环引用，在通过mutation转而再存储到vuex中时，会导致调用栈溢出，原因难道是vuex mutation在深拷贝时没有考虑循环引用的情况？所以这里不进行循环引用，只记录parent的id。
              itemLevel2.children = []
              itemLevel1.childrenTemp.push(itemLevel2)
              // 对于每个三级元素
              for (const sceneItem of state.info.scenes) {
                // 如果属于上述二级分类
                if (itemLevel2.id === sceneItem.category /* 注意拼写！！！ */) {
                  const itemLevel3 = deepClone(sceneItem)
                  itemLevel3.parentId = itemLevel2.id  // 看起来，vuex getter中的数据如果存在循环引用，在通过mutation转而再存储到vuex中时，会导致调用栈溢出，原因难道是vuex mutation在深拷贝时没有考虑循环引用的情况？所以这里不进行循环引用，只记录parent的id。
                  itemLevel2.children.push(itemLevel3)
                }
              }
              // 按weight排序
              itemLevel2.children.sort((a, b) => {
                if (a.weight === undefined && b.weight === undefined) {
                  return 0
                } else if (a.weight !== undefined && b.weight === undefined) {
                  return -1
                } else if (a.weight === undefined && b.weight !== undefined) {
                  return 1
                } else {
                  return a.weight - b.weight
                }
              })
              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,
    isShow: state => state.isShow,
    allVrlist: state => state.allVrlist,

    uploadStatusListAudio: state => state.uploadStatusListAudio,
    uploadStatusListImage: state => state.uploadStatusListImage,
    uploadStatusListPano: state => state.uploadStatusListPano,
    uploadStatusListVideo: state => state.uploadStatusListVideo,

    editorNavDragInfo: state => state.editorNavDragInfo,
  },
  mutations: {
    SetUserAvatar(state, avatar) {
      if (typeof avatar === 'string') {
        state.userAvatar = avatar
      }
    },
    SetUserNickName(state, nickName) {
      if (typeof nickName === 'string') {
        state.userNickName = nickName
      }
    },

    SetTabList(state, list) {
      state.tablist = list
    },
    SetTempTabList(state, list) {
      state.temptablist = list
    },
    SetVrList(state, list) {
      state.vrlist = list
    },
    UpdateIsShowState(state, isShow) {
      state.isShow = isShow
    },
    UpdateIsEditingState(state, isShow) {
      state.isEditing = isShow
    },
    SetAllVrlist(state, list) {
      state.allVrlist = list
    },
    SetInitScene(state, scene) {
      state.initScene = scene
    },
    SetActiveItem(state, scene) {
      state.activeItem = scene
    },
    SetShowInfo(state, data) {
      state.showInfo = data
    },
    SetInfo(state, data) {
      state.info = 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))
    },
    BackupHotSpot(state, data) {
      state.backupHotSpot = data
    },

    setUploadStatusListImage(state, data) {
      state.uploadStatusListImage = data
    },
    setUploadStatusListAudio(state, data) {
      state.uploadStatusListAudio = data
    },
    setUploadStatusListVideo(state, data) {
      state.uploadStatusListVideo = data
    },
    
    setEditorNavDragType(state, data) {
      if (!['topologyGroupLevel1', 'topologyGroupLevel2', 'scene'].includes(data)) {
        throw("拖拽类型必须是'topologyGroupLevel1', 'topologyGroupLevel2', 'scene'之一！")
      }
      state.editorNavDragInfo.type = data
    },
    setEditorNavDragNode(state, data) {
      state.editorNavDragInfo.node = data
    },
    clearEditorNavDragInfo(state) {
      state.editorNavDragInfo.type = ''
      state.editorNavDragInfo.node = {}
    }
  },
  actions: {
    refreshUserInfo(context) {
      try {
        const userInfo = JSON.parse(localStorage.getItem('info'))
        context.commit('SetUserAvatar', userInfo.head)
        context.commit('SetUserNickName', userInfo.nickName)
      } catch (error) {
        console.log('从storage没有读取到有意义的info，store里用户信息置空。')
        context.commit('SetUserAvatar', '')
        context.commit('SetUserNickName', '')
      }
    },
  },
  modules: {

  }
})

export default store