import { createStore } from 'vuex' export default createStore({ state: { panoData: null, haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false, canStart: false, }, getters: { catalogTopology: (state) => { if (!state.panoData || !state.panoData.catalogRoot || !state.panoData.catalogs) { return } //四层:root,level1(一级分类),level2(二级分类或直属于一级分类的场景), level3(场景) let root = utils.deepClone(state.panoData.catalogRoot) // 对于每个一级分类 for (const itemLevel1 of root) { // 指定每个一级分类的下级 itemLevel1.childrenTemp = [] for (const itemLevel2Id of itemLevel1.children) { for (const catalogsItem of state.panoData.catalogs) { if (itemLevel2Id === catalogsItem.id) { const itemLevel2 = utils.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.panoData.scenes) { // 如果属于上述二级分类 if (itemLevel2.id === sceneItem.category /* 注意拼写!!! */) { const itemLevel3 = utils.deepClone(sceneItem) itemLevel3.parentId = itemLevel2.id // 看起来,vuex getter中的数据如果存在循环引用,在通过mutation转而再存储到vuex中时,会导致调用栈溢出,原因难道是vuex mutation在深拷贝时没有考虑循环引用的情况?所以这里不进行循环引用,只记录parent的id。 itemLevel2.children.push(itemLevel3) } } } } } itemLevel1.children = itemLevel1.childrenTemp delete itemLevel1.childrenTemp } return root }, }, mutations: { setPanoData(state, value) { state.panoData = value }, declareCanStart(state) { state.canStart = true }, setHaveShownStartUp(state, value) { state.haveShownStartUp = value }, }, actions: { }, modules: { } })