logic-helper/src/store/storage/storage.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import {
    defineStore
} from 'pinia';
import {
    toRaw,
    markRaw,
    shallowReactive
} from 'vue'
import {
    shallowClone,
    showToast
} from '@/utils/util.js'
import {
    store
} from '@/common/js/app.js'
import ws from '@/ws/index.js';
let initPromise = null;

function mapIdName() {
    this.nodeMap = markRaw({})
    this.nodeConfig = markRaw({})
    if(this.currentTopo){
        for (let val of this.currentTopo.config.data.nodeDataArray) {
            this.nodeMap[val.key] = val.key;
            this.nodeMap[val.text] = val.key;
            this.nodeConfig[val.key] = markRaw(toRaw(val))
            this.nodeConfig[val.text] = this.nodeConfig[val.key]
        }
    }
}
export const useStorage = defineStore({
    id: 'topo-storage', // id必填，且需要唯一
    state: () => {
        return {
            logic: {},
            currentTopo: null,
            topoId: null,
            nodeMap: {},
            nodeConfig: {},
        };
    },
    actions: {
        focus(id) {
            this.topoId = id;
            this.currentTopo = this.logic[id];
            mapIdName.call(this)
        },
        init() {
            initPromise = initPromise || new Promise(async (resolve) => {
                try {
                    let res = await ws.getLogic();
                    this.logic = shallowReactive(res);
                    this.currentTopo = this.logic[this.topoId];
                    for(let k in this.logic){
                        if(k!='.config'){
                            if(this.logic[k].config) {
                                if(Array.isArray(this.logic[k].config.group)){
                                    this.logic[k].config.group = this.logic[k].config.group[0];
                                }
                                if(!this.logic[k].config.group){
                                    this.logic[k].config.group = 'index'
                                }
                            }
                        }
                    }
                    resolve(this.logic)
                    mapIdName.call(this)
                } catch (e) {
                    console.log('init error:::',e)
                }
            })
            return initPromise
        },
        findToposByGroup(id){
            if(!id){
                return []
            }
            const arr = []
            for(let k in this.logic){
                if(k!='.config'){
                    if(this.logic[k].config) {
                        if(Array.isArray(this.logic[k].config.group)){
                            if(this.logic[k].config.group.includes(id)){
                                arr.push(this.logic[k])
                            }
                        } else {
                            if(this.logic[k].config.group == id){
                                arr.push(this.logic[k])
                            }
                        }
                    }
                }
            }
            return arr;
        },
        saveToFiles(show=true){
            show && showToast('已保存')
            return ws.setLogic(toRaw(this.logic))
        },
        async setData(data) {
            if (data) {
                data = toRaw(data)
                this.logic = shallowReactive(data);
                this.currentTopo = shallowClone(this.logic[this.topoId])
            }else{
                this.currentTopo = shallowClone(this.logic[this.topoId])
            }
            mapIdName.call(this);
            if(this.saveBar){
                return;
            }
            this.saveBar = true;
            setTimeout(() => {
                this.saveToFiles(false);
                this.saveBar = false;
            }, 10000);
            return this;
        },
        setConfig(id, config) {
            if(config===undefined) return this.logic['.config'];
            this.logic['.config']= this.logic['.config'] || {};
            this.logic['.config'][id] = {
                ...this.logic['.config'][id],
                ...config
            };
            ws.setLogic(toRaw(this.logic))
            return this.logic['.config'];
        },
        forceUpdate(){
            for(let k in this.logic) {
                this.logic[k] = shallowClone(this.logic[k])
                if(k!='.config'){
                    if(this.logic[k].config) {
                        if(Array.isArray(this.logic[k].config.group)){
                            this.logic[k].config.group = this.logic[k].config.group[0];
                        }
                        if(!this.logic[k].config.group){
                            this.logic[k].config.group = 'index'
                        }
                        this.logic[k].topo.topo.group = this.logic[k].config.group;
                        this.logic[k].topo.topo.name = this.logic[k].config.name;
                    }
                }
            }
                    console.log('this.logic[k]',this.logic)
            this.currentTopo = this.logic[this.topoId];
        }
    }
});