margis里面vuex的部分换成pinia

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<Store<Test>> = Symbol("test")
+export const key: InjectionKey<Test> = Symbol("test")
 
-export const store = createStore<Test>({
-  state: {
-    count: 0
-  }
+export const store = defineStore({
+  id: "marsTest",
+  state: (): Test => ({
+    count: 0,
+  }),
 })

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<Store<WidgetState>> = 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<WidgetState>} options
- * @return {Store<WidgetState>} 公共状态
+ * @param {widgetStateStore} widgetStateStore
+ * @return {widgetStateStore} 公共状态
  */
-export const injectState = (options: StoreOptions<WidgetState>): Store<WidgetState> => {
-  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<WidgetState>): Store<WidgetSta
         key: uuidV4()
       }
     })
-    options.state!.widgets = widgets!
+    widgetStateStore.state!.widgets = widgets!
   }
-  return createStore<WidgetState>({
-    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<string, EventCb[]> = {}
@@ -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)
     }
   }
 }

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:
+-->
+<!--
+ * @Author: 滕嵩
+ * @Date: 2024-01-25 08:59:36
+ * @LastEditors: 滕嵩
+ * @LastEditTime: 2024-01-25 10:55:02
+ * @FilePath: \vue-vben-admin\src\mars\components\mars-work\main-view.vue
+ * @Description:
 -->
 <template>
   <ConfigProvider :locale="locale">
@@ -38,8 +46,8 @@ const locale = zhCN
 
 const widgetStore = useWidgetStore()
 
-const widgets = computed(() => widgetStore.state.widgets)
-const openAtStart = computed(() => widgetStore.state.openAtStart)
+const widgets = computed(() => widgetStore.widgets)
+const openAtStart = computed(() => widgetStore.openAtStart)
 
 const configUrl = `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}`
 const props = withDefaults(

src/mars/install/widget-store.ts

@@ -3,13 +3,22 @@
  * @copyright 火星科技 mars3d.cn
  * @author 木遥 2022-02-19
  */
+/*
+ * @Author: 滕嵩
+ * @Date: 2024-01-24 08:53:41
+ * @LastEditors: 滕嵩
+ * @LastEditTime: 2024-01-25 10:54:42
+ * @FilePath: \vue-vben-admin\src\mars\install\widget-store.ts
+ * @Description:
+ */
 import { defineAsyncComponent, markRaw } from "vue"
 import { WidgetState } from "@/mars/common/store/widget"
-import { StoreOptions } from "vuex"
+import { defineStore } from "pinia"
 
-const store: StoreOptions<WidgetState> = {
-  state: {
-    widgets: [
+const store = defineStore({
+  id: "widgets",
+  state:(): WidgetState => ({
+    widgets:[
       {
         component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/query-poi/index.vue"))),
         name: "query-poi",
@@ -50,7 +59,7 @@ const store: StoreOptions<WidgetState> = {
       }
     ],
     openAtStart: ["query-poi", "toolbar"]
-  }
-}
+  })
+})
 
 export default store