add pinia store

package.json

@@ -18,6 +18,7 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "moment": "^2.29.1",
+    "pinia": "^2.0.0-rc.9",
     "ua-parser-js": "^0.7.28",
     "vue": "^3.2.14",
     "vue-router": "4.0.10"

src/App.vue

@@ -11,8 +11,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, watchEffect } from "vue";
-// import { store } from "./features/mark/store";
-
+import { useMainStore } from "@/store";
+const mainStore = useMainStore();
 
 export default defineComponent({
   name: "App",
@@ -20,10 +20,10 @@ export default defineComponent({
   setup() {
     const spinning = ref(false);
 
-    // watch(
-    //   () => store.globalMask,
-    //   () => (spinning.value = store.globalMask)
-    // );
+    watch(
+      () => mainStore.globalMask,
+      () => (spinning.value = mainStore.globalMask)
+    );
 
     watchEffect(() => {
       const bodyScrollProp = spinning.value ? "hidden" : "auto";
@@ -31,7 +31,6 @@ export default defineComponent({
     });
     return { spinning };
   },
-
 });
 </script>
 

src/main.ts

@@ -15,12 +15,13 @@ import filters from "@/filters";
 // import "ant-design-vue/dist/antd.css";
 // vite-plugin-components 不能引入message的style
 import "ant-design-vue/es/message/style/css.js";
+import { createPinia } from "pinia";
 
 // if(process.env.NODE_ENV)
 // console.log(import.meta.env.DEV);
 const app = createApp(App);
 app.use(router);
-// app.use(Antd);
+app.use(createPinia());
 app.config.globalProperties.$filters = filters;
 
 app.mount("#app");

src/store/index.ts

@@ -0,0 +1,14 @@
+import { defineStore } from "pinia";
+
+// main is the name of the store. It is unique across your application
+// and will appear in devtools
+export const useMainStore = defineStore("main", {
+  // a function that returns a fresh state
+  state: () => {
+    return {
+      globalMask: false,
+    };
+  },
+  getters: {},
+  actions: {},
+});

yarn.lock

@@ -245,7 +245,7 @@
     "@vue/compiler-dom" "3.2.19"
     "@vue/shared" "3.2.19"
 
-"@vue/devtools-api@^6.0.0-beta.14":
+"@vue/devtools-api@^6.0.0-beta.14", "@vue/devtools-api@^6.0.0-beta.15":
   version "6.0.0-beta.18"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/download/@vue/devtools-api-6.0.0-beta.18.tgz?cache=0&sync_timestamp=1632352727221&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Fdevtools-api%2Fdownload%2F%40vue%2Fdevtools-api-6.0.0-beta.18.tgz#84c0aff9289a57294cb97490811f69e8a0a67f8a"
   integrity sha1-hMCv+SiaVylMuXSQgR9p6KCmf4o=
@@ -1155,6 +1155,14 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   resolved "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz?cache=0&sync_timestamp=1621648246651&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpicomatch%2Fdownload%2Fpicomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=
 
+pinia@^2.0.0-rc.9:
+  version "2.0.0-rc.9"
+  resolved "https://registry.nlark.com/pinia/download/pinia-2.0.0-rc.9.tgz#ea0812ea28f8197f14767e9b731ae10d3a523803"
+  integrity sha1-6ggS6ij4GX8Udn6bcxrhDTpSOAM=
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.15"
+    vue-demi "*"
+
 pirates@^4.0.1:
   version "4.0.1"
   resolved "https://registry.nlark.com/pirates/download/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
@@ -1700,6 +1708,11 @@ vscode-vue-languageservice@^0.27.0:
     vscode-pug-languageservice "^0.27.24"
     vscode-typescript-languageservice "^0.27.25"
 
+vue-demi@*:
+  version "0.11.4"
+  resolved "https://registry.nlark.com/vue-demi/download/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
+  integrity sha1-YQGZL+RyTPVjQBihbpU/MFLpTio=
+
 vue-router@4.0.10:
   version "4.0.10"
   resolved "https://registry.nlark.com/vue-router/download/vue-router-4.0.10.tgz?cache=0&sync_timestamp=1628495505697&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-router%2Fdownload%2Fvue-router-4.0.10.tgz#ec8fda032949b2a31d3273170f8f376e86eb52ac"