From e7dddbe1f5d35b0eaf5f4c711815bb67ebf5c2db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Thu, 25 Jan 2024 11:00:46 +0800 Subject: [PATCH] =?UTF-8?q?margis=E9=87=8C=E9=9D=A2vuex=E7=9A=84=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=8D=A2=E6=88=90pinia?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mars/common/store/test.ts | 21 +- src/mars/common/store/widget.ts | 235 ++++++++++---------- src/mars/components/mars-work/main-view.vue | 14 +- src/mars/install/widget-store.ts | 21 +- 4 files changed, 158 insertions(+), 133 deletions(-) diff --git a/src/mars/common/store/test.ts b/src/mars/common/store/test.ts index 9984874..c371ef5 100644 --- a/src/mars/common/store/test.ts +++ b/src/mars/common/store/test.ts @@ -3,17 +3,26 @@ * @copyright 火星科技 mars3d.cn * @author 火星渣渣灰 2022-02-19 */ -import { Store, createStore } from "vuex" +/* + * @Author: 滕嵩 + * @Date: 2024-01-24 14:09:37 + * @LastEditors: 滕嵩 + * @LastEditTime: 2024-01-25 10:53:31 + * @FilePath: \vue-vben-admin\src\mars\common\store\test.ts + * @Description: + */ +import { defineStore } from "pinia" import { InjectionKey } from "vue" export interface Test { count?: number } -export const key: InjectionKey> = Symbol("test") +export const key: InjectionKey = Symbol("test") -export const store = createStore({ - state: { - count: 0 - } +export const store = defineStore({ + id: "marsTest", + state: (): Test => ({ + count: 0, + }), }) diff --git a/src/mars/common/store/widget.ts b/src/mars/common/store/widget.ts index 79b4daf..6b9e16a 100644 --- a/src/mars/common/store/widget.ts +++ b/src/mars/common/store/widget.ts @@ -3,8 +3,16 @@ * @copyright 火星科技 mars3d.cn * @author 火星渣渣灰 2022-02-19 */ -import { Store, StoreOptions, createStore, useStore } from "vuex" -import { InjectionKey, computed, nextTick, onUnmounted, inject } from "vue" +/* + * @Author: 滕嵩 + * @Date: 2024-01-24 15:39:38 + * @LastEditors: 滕嵩 + * @LastEditTime: 2024-01-25 10:58:14 + * @FilePath: \vue-vben-admin\src\mars\common\store\widget.ts + * @Description: + */ +import { defineStore } from "pinia" +import { nextTick, onUnmounted, inject } from "vue" import { v4 as uuidV4 } from "uuid" // 为 store state 声明类型 @@ -33,28 +41,104 @@ export interface WidgetState { defaultOption?: DefaultOption // 支持配置默认参数 } -export let key: InjectionKey> = Symbol("widget") +export const widgetStateStore = defineStore({ + id:"WidgetState", + state: ():WidgetState => ({ + widgets:[], + openAtStart:[], + defaultOption:{ + autoDisable: true, + disableOther: false, + group:'', + meta:'' + } + }), + getters:{ + }, + actions:{ + activate(widget: any) { + const value = typeof widget === "string" ? widget : widget.name + const pannel = this.widgets.find((item) => item.name === value) + if (!pannel) { + console.log("widget不存在", widget) + return + } + if (pannel.visible && widget.reload) { + // 重载组件 + pannel.visible = false + pannel.key = uuidV4() + } + + nextTick(() => { + if (typeof widget === "object" && widget !== null && widget.data) { + pannel.data = widget.data + } + pannel.visible = true + }) + + // 处理其他面板的显示隐藏 + this.widgets.forEach((item) => { + if (pannel.name !== item.name) { + // 默认关闭同组 + if (pannel.group && item.group === pannel.group) { + item.visible = false + } + // 关闭非同组需要关闭的面板 + if (Array.isArray(pannel.disableOther)) { + pannel.disableOther.forEach((item: string) => { + this.disable(item) + }) + } else if (pannel.disableOther && item.autoDisable) { + item.visible = false + } + } + }) + + if (!this.openAtStart.includes(value)) { + this.openAtStart.push(value) + } + }, + disable(widget: any) { + const value = widget + const pannel = this.widgets.find((item, i) => { + if (item.name === value) { + delete this.widgets[i].data + return true + } else { + return false + } + }) + // 显示面板 + if (pannel) { + pannel.visible = false + } + }, + disableAll(hasAll: boolean) { + this.widgets.forEach((item: Widget) => { + if (item.visible && (hasAll || item.autoDisable)) { + item.visible = false + } + }) + }, + }, +}) /** * 初始化状态 - * @param {StoreOptions} options - * @return {Store} 公共状态 + * @param {widgetStateStore} widgetStateStore + * @return {widgetStateStore} 公共状态 */ -export const injectState = (options: StoreOptions): Store => { - key = Symbol("widget") - if (typeof options.state === "function") { - options.state = (options.state() || {}) as WidgetState +export const injectState = (widgetStateStore) => { + if(typeof widgetStateStore.state === "function") { + widgetStateStore.state = (widgetStateStore.state() || {}) as WidgetState } - const defaultOption = { - autoDisable: true, - disableOther: false, - ...options.state.defaultOption - } - const openAtStart = options.state?.openAtStart - if (!options) { + const defaultOption = widgetStateStore.state.defaultOption + const openAtStart = widgetStateStore.state?.openAtStart + + if(!widgetStateStore){ throw new Error("injectState 参数不能为空") } else { - const widgets = options.state?.widgets.map((item) => { + const widgets = widgetStateStore.state?.widgets.map((item) => { return { visible: openAtStart?.includes(item.name), ...defaultOption, @@ -66,98 +150,12 @@ export const injectState = (options: StoreOptions): Store({ - state: { - widgets: [], - openAtStart: [], - ...options.state, - defaultOption - }, - getters: { - ...options.getters - }, - mutations: { - addAlive(state, value: string) { - if (!state.openAtStart.includes(value)) { - state.openAtStart.push(value) - } - }, - ...options.mutations - }, - actions: { - activate({ commit, state, dispatch }, widget: any) { - const value = typeof widget === "string" ? widget : widget.name - - const pannel = state.widgets.find((item) => item.name === value) - if (!pannel) { - console.log("widget不存在", widget) - return - } - - if (pannel.visible && widget.reload) { - // 重载组件 - pannel.visible = false - pannel.key = uuidV4() - } - - nextTick(() => { - if (typeof widget === "object" && widget !== null && widget.data) { - pannel.data = widget.data - } - pannel.visible = true - }) - - // 处理其他面板的显示隐藏 - state.widgets.forEach((item) => { - if (pannel.name !== item.name) { - // 默认关闭同组 - if (pannel.group && item.group === pannel.group) { - item.visible = false - } - // 关闭非同组需要关闭的面板 - if (Array.isArray(pannel.disableOther)) { - pannel.disableOther.forEach((item: string) => { - dispatch("disable", item) - }) - } else if (pannel.disableOther && item.autoDisable) { - item.visible = false - } - } - }) - - if (!state.openAtStart.includes(value)) { - commit("addAlive", value) - } - }, - disable({ state }, widget: string) { - const value = widget - const pannel = state.widgets.find((item, i) => { - if (item.name === value) { - delete state.widgets[i].data - return true - } else { - return false - } - }) - // 显示面板 - if (pannel) { - pannel.visible = false - } - }, - disableAll({ state }, hasAll: boolean) { - state.widgets.forEach((item: Widget) => { - if (item.visible && (hasAll || item.autoDisable)) { - item.visible = false - } - }) - }, - ...options.actions - } - }) + return widgetStateStore } + type EventCb = (...args: any[]) => void class Event { private _cache: Record = {} @@ -199,12 +197,12 @@ class Event { const widgetEvent = new Event() export function useWidgetStore() { - const store = useStore(key) + const store = widgetStateStore() return store } export function useWidget() { - const store = useStore(key) + const store = widgetStateStore() const getCurrentWidget = inject<() => string>("getCurrentWidget") let currentWidget: any @@ -212,7 +210,7 @@ export function useWidget() { const widegtName = getCurrentWidget() currentWidget = { - ...store.state.widgets.find((item: any) => item.name === widegtName), + ...store.$state.widgets.find((item: any) => item.name === widegtName), onUpdate(callback: EventCb) { if (currentWidget) { widgetEvent.on(currentWidget.name, callback) @@ -229,11 +227,10 @@ export function useWidget() { currentWidget: currentWidget, // 获取指定的widget getWidget: (name: string) => { - const widget = store.state.widgets.find((item: any) => item.name === name) + const widget = store.$state.widgets.find((item: any) => item.name === name) if (!widget) { return null } - return { ...widget, onUpdate(callback: EventCb) { @@ -247,8 +244,10 @@ export function useWidget() { } }, setVisible(name: string, visible: boolean) { - const widget = store.state.widgets.find((item: any) => item.name === name) - widget.visible = visible + const widget = store.$state.widgets.find((item: any) => item.name === name) + if(widget){ + widget.visible = visible + } }, // 出发对应widget的onUpdate updateWidget(name: string, ...args: any[]) { @@ -256,7 +255,7 @@ export function useWidget() { }, // 获取widget的当前激活状态 isActivate: (name: string) => { - const widget = store.state.widgets.find((item: any) => item.name === name) + const widget = store.$state.widgets.find((item: any) => item.name === name) return widget ? widget.visible : false }, // 激活指定 widget模块 @@ -267,7 +266,6 @@ export function useWidget() { } else { widgets = option } - console.log("widgets", widgets) widgets.forEach((widget) => { let params: any if (typeof widget === "string") { @@ -275,7 +273,8 @@ export function useWidget() { } else { params = { reload, ...widget } } - store.dispatch("activate", params) + store.activate(params) + // store.dispatch("activate", params) }) }, // 释放指定的widget @@ -288,12 +287,12 @@ export function useWidget() { } widgets.forEach((widget) => { - store.dispatch("disable", widget) + store.disable(widget) }) }, // 关闭释放所有widget ，hasAll传true值强制释放所有widget(默认autoDisable为false的widet不会释放) disableAll: (hasAll = false) => { - store.dispatch("disableAll", hasAll) + store.disableAll(hasAll) } } } diff --git a/src/mars/components/mars-work/main-view.vue b/src/mars/components/mars-work/main-view.vue index 52e77c1..cdbb821 100644 --- a/src/mars/components/mars-work/main-view.vue +++ b/src/mars/components/mars-work/main-view.vue @@ -4,7 +4,15 @@ * @LastEditors: Do not edit * @LastEditTime: 2024-01-18 08:41:32 * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\mars\components\mars-work\main-view.vue - * @Description: + * @Description: +--> +