增加使用pina 例子

Signed-off-by: caner <5658514@qq.com>

README.md

@@ -59,9 +59,9 @@ yarn
 
 yarn add model_exp
 
-npm run dev
+yarn dev
 
-npm run build
+yarn build
 
 ```
 

package.json

@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "echarts": "^5.3.3",
     "js-md5": "^0.7.3",
     "pinia": "^2.0.14",
-    "vue": "^3.2.25",
-    "vue-router": "^4.0.13",
     "view-ui-plus": "^1.2.0",
-    "echarts": "^5.3.3"
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",

src/components/1.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
     6666666666666
+    <Button type="primary">
+      Primary
+    </Button>
   </div>
 </template>

src/components/loading.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="bg">
+    <div class="loader" />
+  </div>
+</template>
+<style lang="less" scoped>
+    .bg{
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.5);
+    }
+    .loader {
+
+        border: 5px solid #f3f3f3;
+        border-radius: 50%;
+        border-top: 5px solid #3498db;
+        width: 30px;
+        height: 30px;
+        -webkit-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+    }
+
+    @-webkit-keyframes spin {
+        0% { -webkit-transform: rotate(0deg); }
+        100% { -webkit-transform: rotate(360deg); }
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>

src/pages/admin/App.vue

@@ -1,16 +1,33 @@
 <template>
   <div id="app">
+    <loading v-if="loading" />
     <router-view />
   </div>
 </template>
+<script>
+import loading from '@/components/loading.vue'
+import { mapState } from 'pinia'
+import useStore from './store/index'
 
+export default {
+  components: {
+    loading
+  },
+  computed: {
+    ...mapState(useStore, [ 'loading' ])
+  }
+}
+</script>
 <style>
+html,body{
+  margin: 0;
+  padding: 0;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/pages/admin/main.js

@@ -1,6 +1,20 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { createPinia } from 'pinia'
+import '@/utils/rem.js'
+const store = createPinia()
+// 身份验证
+// router.beforeEach((to, from, next) => {
+//   const userdata = userData.getUserData()
+//   const datas = JSON.parse(userdata)
+//   if (to.name !== 'login' && !datas) {
+//     location.href = '/login.html#/'
+//   } else {
+//     next()
+//   }
+// })
 const app = createApp(App)
 app.use(router)
+  .use(store)
   .mount('#app')

src/pages/admin/router/index.js

@@ -10,4 +10,4 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes
 })
-export default router
+export default router

src/pages/admin/store/index.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+// vuex 写法
+const useStore = defineStore({
+  id: 'admin', // id必填，且需要唯一
+  state: () => ({
+    loading: false
+  }),
+  getters: {
+
+  },
+  actions: {
+    setLoading(state) {
+      this.loading = state
+    }
+  }
+})
+export default useStore

src/pages/admin/views/test.vue

@@ -4,17 +4,21 @@
   </div>
 </template>
 <script>
-import axios from '@/utils/axios'
-
+import { mapWritableState } from 'pinia'
+import useStore from '../store/index'
+import { sleep } from '@/utils/JsFn.js'
 export default {
   data() {
     return {
       test: '55555555555'
     }
   },
+  computed: {
+    ...mapWritableState(useStore, [ 'loading' ])
+  },
   async mounted() {
-    const txt = await axios.get('https://www.baidu.com')
-    console.log(666, txt)
+    await sleep(3000)
+    this.loading = true
   }
 }
 </script>

src/pages/index/App.vue

@@ -1,16 +1,25 @@
 <template>
   <div id="app">
+    <loading v-if="loading" />
     <router-view />
   </div>
 </template>
-
+<script>
+import loading from '@/components/loading.vue'
+import { mapState } from 'pinia'
+import useStore from './store/index'
+export default {
+  components: {
+    loading
+  },
+  computed: {
+    ...mapState(useStore, [ 'loading' ])
+  }
+}
+</script>
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+html,body{
+  margin: 0;
+  padding: 0;
 }
 </style>

src/pages/index/main.js

@@ -2,12 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
-import ViewUIPlus from 'view-ui-plus'
 import 'view-ui-plus/dist/styles/viewuiplus.css'
-const store = createPinia()
 
+import '@/utils/rem.js'
+const store = createPinia()
+// 身份验证
+// router.beforeEach((to, from, next) => {
+//   const userdata = userData.getUserData()
+//   const datas = JSON.parse(userdata)
+//   if (to.name !== 'login' && !datas) {
+//     location.href = '/login.html#/'
+//   } else {
+//     next()
+//   }
+// })
 const app = createApp(App)
 app.use(router)
   .use(store)
-  .use(ViewUIPlus)
-  .mount('#app')
+  .mount('#app')

src/pages/index/router/index.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 const routes = [
   {
     path: '/',
-    component: () => import('../views/test.vue')
+    component: () => import('../views/workOrder/index.vue')
   }
 ]
 const router = createRouter({

src/pages/index/store/index.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+// vuex 写法
+const useStore = defineStore({
+  id: 'main', // id必填，且需要唯一
+  state: () => ({
+    loading: false
+  }),
+  getters: {
+
+  },
+  actions: {
+
+  }
+})
+export default useStore

src/pages/index/views/test.vue

@@ -1,23 +1,254 @@
 <template>
-  <div>
-    <test />
+  <div class="work-order">
+    <Button
+      type="primary"
+      class="btn"
+      @click="modalShow = true"
+    >
+      新增工单
+    </Button>
+    <Table
+      :columns="columns"
+      :data="data"
+    >
+      <template #operation="{}">
+        <!-- <Button>查看详情</Button> -->
+        <div class="text">
+          详情
+        </div>
+      </template>
+    </Table>
+    <Modal
+      v-model="modalShow"
+      title="新增工单"
+      @on-ok="ok"
+      @on-cancel="cancel"
+    >
+      <Form
+        ref="form"
+        :model="form"
+      >
+        <FormItem label="工单名称:">
+          <Input
+            v-model="form.name"
+            placeholder="请输入工单名称"
+          />
+        </FormItem>
+        <FormItem label="具体问题:">
+          <Input
+            v-model="form.question"
+            type="textarea"
+            placeholder="请输入具体问题"
+          />
+        </FormItem>
+        <FormItem label="图片上传:">
+          <div class="img">
+            <div
+              v-for="item in uploadList"
+              :key="item"
+              class="demo-upload-list"
+            >
+              <template v-if="item.status === 'finished'">
+                <img :src="item.url">
+                <div class="demo-upload-list-cover">
+                  <Icon
+                    type="ios-eye-outline"
+                    @click="handleView(item.url)"
+                  />
+                  <Icon
+                    type="ios-trash-outline"
+                    @click="handleRemove(item)"
+                  />
+                </div>
+              </template>
+              <template v-else>
+                <Progress
+                  v-if="item.showProgress"
+                  :percent="item.percentage"
+                  hide-info
+                />
+              </template>
+            </div>
+            <Upload
+              ref="upload"
+              :show-upload-list="false"
+              :default-file-list="defaultList"
+              :on-success="handleSuccess"
+              :format="['jpg', 'jpeg', 'png']"
+              :max-size="2048"
+              :on-format-error="handleFormatError"
+              :on-exceeded-size="handleMaxSize"
+              :before-upload="handleBeforeUpload"
+              multiple
+              type="drag"
+              action="//jsonplaceholder.typicode.com/posts/"
+              style="display: inline-block; width: 0.58rem"
+            >
+              <div
+                style="width: 0.58rem; height: 0.58rem; line-height: 0.58rem"
+              >
+                <Icon
+                  type="ios-camera"
+                  size="20"
+                />
+              </div>
+            </Upload>
+            <Modal
+              v-model="visible"
+              title="图片"
+            >
+              <img
+                v-if="visible"
+                :src="imgName"
+                style="width: 100%"
+              >
+            </Modal>
+          </div>
+        </FormItem>
+      </Form>
+    </Modal>
   </div>
 </template>
 <script>
-import test from '@/components/1.vue'
-import useUserStore from '../store/user'
 export default {
-  components: {
-    test
+  data() {
+    return {
+      // modal显示隐藏
+      modalShow: false,
+
+      columns: [ {
+        title: '工单名称',
+        key: 'name',
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        key: 'time',
+        align: 'center'
+      },
+      {
+        title: '创建人',
+        key: 'people',
+        align: 'center'
+      }, {
+        title: '是否完成',
+        key: 'complete',
+        align: 'center'
+      }, {
+        title: '操作',
+        slot: 'operation',
+        align: 'center'
+      }
+      ],
+      data: [ {
+        name: '问题1',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      },
+      {
+        name: '问题2',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      },
+      {
+        name: '问题3',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      },
+      {
+        name: '问题4',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      }
+      ],
+      //   图片
+
+      defaultList: [
+        {
+          name: 'a42bdcc1178e62b4694c830f028db5c0',
+          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657965995&t=bc5851d837f31836a234ba8d5c0b0144'
+        },
+        {
+          name: 'bc7521e033abdd1e92222d733590f104',
+          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F063021120F9%2F210630120F9-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657966092&t=abd300eae0fcc7d00058060b27cd68dd'
+        }
+      ],
+      imgName: '',
+      visible: false,
+      uploadList: []
+    }
   },
   methods: {
-    test() {
-      console.log(123)
+    ok() {
+      this.$Message.info('Clicked ok')
+    },
+    cancel() {
+      this.$Message.info('Clicked cancel')
+    },
+    handleView(name) {
+      this.imgName = name
+      this.visible = true
+    },
+    handleRemove(file) {
+      const { fileList } = this.$refs.upload
+      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
+    },
+    handleSuccess(res, file) {
+      file.url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657965995&t=bc5851d837f31836a234ba8d5c0b0144'
+      file.name = '7eb99afb9d5f317c912f08b5212fd69a'
+    },
+    handleFormatError(file) {
+      this.$Notice.warning({
+        title: 'The file format is incorrect',
+        desc: `File format of ${file.name} is incorrect, please select jpg or png.`
+      })
+    },
+    handleMaxSize(file) {
+      this.$Notice.warning({
+        title: 'Exceeding file size limit',
+        desc: `File  ${file.name} is too large, no more than 2M.`
+      })
+    },
+    handleBeforeUpload() {
+      const check = this.uploadList.length < 5
+      if (!check) {
+        this.$Notice.warning({
+          title: 'Up to five pictures can be uploaded.'
+        })
+      }
+      return check
     }
   },
   mounted() {
-    const userStore = useUserStore()
-    console.log(66, userStore)
+    this.uploadList = this.$refs.upload.fileList
+    console.log('====================================')
+    console.log(this.$refs.upload.fileList)
+    console.log('====================================')
+  }
+}
+
+</script>
+<style lang="less" scoped>
+.work-order {
+  .btn {
+    margin: 0.3rem 0.2rem;
   }
+  .text {
+    cursor: pointer;
+    &:hover {
+      color: skyblue;
+    }
+  }
+}
+:deep(.ivu-input-wrapper) {
+    width: 80%;
+}
+img {
+  width: 0.58rem;
+  height: 0.58rem;
 }
-</script>
+</style>

src/pages/index/views/workOrder/components/add.vue

@@ -0,0 +1,192 @@
+<template>
+  <Modal
+    v-model="modalShow"
+    title="新增工单"
+    class="add-modal"
+    @on-ok="ok"
+    @on-cancel="cancel"
+  >
+    <Form
+      ref="form"
+      :model="form"
+    >
+      <FormItem label="工单名称:">
+        <Input
+          v-model="form.name"
+          placeholder="请输入工单名称"
+        />
+      </FormItem>
+      <FormItem label="具体问题:">
+        <Input
+          v-model="form.question"
+          type="textarea"
+          placeholder="请输入具体问题"
+        />
+      </FormItem>
+      <FormItem label="图片上传:">
+        <div class="img-list">
+          <div
+            v-for="item in uploadList"
+            :key="item"
+            class="demo-upload-list"
+          >
+            <template v-if="item.status === 'finished'">
+              <img :src="item.url">
+              <div class="demo-upload-list-cover">
+                <Icon
+                  type="ios-eye-outline"
+                  @click="handleView(item.url)"
+                />
+                <Icon
+                  type="ios-trash-outline"
+                  @click="handleRemove(item)"
+                />
+              </div>
+            </template>
+            <template v-else>
+              <Progress
+                v-if="item.showProgress"
+                :percent="item.percentage"
+                hide-info
+              />
+            </template>
+          </div>
+          <Upload
+            ref="upload"
+            :show-upload-list="false"
+            :default-file-list="defaultList"
+            :on-success="handleSuccess"
+            :format="['jpg', 'jpeg', 'png']"
+            :max-size="2048"
+            :on-format-error="handleFormatError"
+            :on-exceeded-size="handleMaxSize"
+            multiple
+            type="drag"
+            action="//jsonplaceholder.typicode.com/posts/"
+            style="display: inline-block; width: 0.58rem"
+          >
+            <div style="width: 0.58rem; height: 0.58rem; line-height: 0.58rem">
+              <Icon
+                type="ios-camera"
+                size="20"
+              />
+            </div>
+          </Upload>
+          <Modal
+            v-model="visible"
+            title="图片"
+          >
+            <img
+              v-if="visible"
+              :src="imgName"
+              style="width: 100%"
+            >
+          </Modal>
+        </div>
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
+<script>
+import {
+  Modal, Form, FormItem, Icon, Upload, Input
+} from 'view-ui-plus'
+export default {
+  components: {
+    Modal, FormItem, Form, Icon, Upload, Input
+  },
+  data() {
+    return {
+      //   表单
+      form: {
+
+      },
+      // modal显示隐藏
+      modalShow: false,
+      //   图片默认
+      defaultList: [
+        {
+          name: 'a42bdcc1178e62b4694c830f028db5c0',
+          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657965995&t=bc5851d837f31836a234ba8d5c0b0144'
+        },
+        {
+          name: 'bc7521e033abdd1e92222d733590f104',
+          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F063021120F9%2F210630120F9-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657966092&t=abd300eae0fcc7d00058060b27cd68dd'
+        }
+      ],
+      imgName: '',
+      visible: false,
+      //   已上传图片的列表
+      uploadList: []
+    }
+  },
+  methods: {
+    // 点击确定
+    ok() {
+      this.$Message.info('Clicked ok')
+    },
+    // 点击取消
+    cancel() {
+      this.$Message.info('取消新增')
+    },
+    handleView(name) {
+      this.imgName = name
+      this.visible = true
+    },
+    handleRemove(file) {
+      const { fileList } = this.$refs.upload
+      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
+    },
+    // 上传成功的钩子函数
+    handleSuccess(res, file) {
+      file.url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657965995&t=bc5851d837f31836a234ba8d5c0b0144'
+      file.name = '7eb99afb9d5f317c912f08b5212fd69a'
+    },
+    // 文件格式校验失败的钩子
+    handleFormatError(file) {
+      this.$Notice.warning({
+        title: 'The file format is incorrect',
+        desc: `File format of ${file.name} is incorrect, please select jpg or png.`
+      })
+    },
+    // 文件超出时候的钩子函数
+    handleMaxSize(file) {
+      this.$Notice.warning({
+        title: '提示',
+        desc: `文件  ${file.name} 超过 2M大小，无法上传.`
+      })
+    }
+  },
+  mounted() {
+    // 默认图片设置
+    this.uploadList = this.$refs.upload.fileList
+  }
+}
+
+</script>
+<style lang="less" scoped>
+.add-modal {
+  .ivu-input-wrapper {
+    width: 80%;
+  }
+  img {
+    width: 0.58rem;
+    height: 0.58rem;
+  }
+  .img-list {
+    display: flex;
+    flex-wrap: wrap;
+    .demo-upload-list {
+        // margin: 0 .1rem;
+        margin-right: .2rem;
+      .demo-upload-list-cover {
+        display: flex;
+        justify-content: space-around;
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/index/views/workOrder/components/details.vue

@@ -0,0 +1,38 @@
+<template>
+  <Modal
+    v-model="modalShow"
+    title="详情"
+    class="details"
+  >
+    <div>
+      工单名称:{{ dtData.name }}
+    </div>
+    <div>
+      创建时间:{{ dtData.time }}
+    </div>
+  </Modal>
+</template>
+<script>
+import { Modal } from 'view-ui-plus'
+export default {
+  components: {
+    Modal
+  },
+  data() {
+    return {
+      modalShow: false,
+      dtData: {}// 详情data
+    }
+  },
+  methods: {
+    setData(data) {
+      this.modalShow = true
+      this.dtData = data
+      console.log(data)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/pages/index/views/workOrder/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="work-order">
+    <Button
+      type="primary"
+      class="btn"
+      @click="addShow"
+    >
+      新增工单
+    </Button>
+    <!-- 表单 -->
+    <Table
+      :columns="columns"
+      :data="data"
+    >
+      <template #operation="{ row }">
+        <!-- <Button>查看详情</Button> -->
+        <div
+          class="text"
+          @click="detalis(row)"
+        >
+          详情
+        </div>
+      </template>
+    </Table>
+    <!-- 新增弹框 -->
+    <add-modal ref="add" />
+    <details-modal ref="details" />
+  </div>
+</template>
+<script>
+import addModal from './components/add.vue'
+import detailsModal from './components/details.vue'
+import { Button, Table } from 'view-ui-plus'
+export default {
+  components: {
+    addModal, detailsModal, Button, Table
+  },
+  data() {
+    return {
+      // modal显示隐藏
+      modalShow: true,
+      //   表单
+      form: {
+
+      },
+      columns: [ {
+        title: '工单名称',
+        key: 'name',
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        key: 'time',
+        align: 'center'
+      },
+      {
+        title: '创建人',
+        key: 'people',
+        align: 'center'
+      }, {
+        title: '是否完成',
+        key: 'complete',
+        align: 'center'
+      }, {
+        title: '操作',
+        slot: 'operation',
+        align: 'center'
+      }
+      ],
+      data: [ {
+        name: '问题1',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      },
+      {
+        name: '问题2',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      },
+      {
+        name: '问题3',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      },
+      {
+        name: '问题4',
+        people: '王二麻子',
+        complete: '是',
+        time: '2016-10-03'
+      }
+      ]
+    }
+  },
+  methods: {
+    // 新增弹框
+    addShow() {
+      this.$refs.add.modalShow = true
+    },
+    // 详情弹框
+    detalis(data) {
+      this.$refs.details.setData(data)
+    }
+  }
+}
+
+</script>
+<style lang="less" scoped>
+.work-order {
+  .btn {
+    margin: 0.3rem 0.2rem;
+  }
+  .text {
+    cursor: pointer;
+    &:hover {
+      color: skyblue;
+    }
+  }
+}
+:deep(.ivu-input-wrapper) {
+  width: 80%;
+}
+img {
+  width: 0.58rem;
+  height: 0.58rem;
+}
+</style>

src/pages/login/App.vue

@@ -1,16 +1,33 @@
 <template>
   <div id="app">
+    <loading v-if="loading" />
     <router-view />
   </div>
 </template>
+<script>
+import loading from '@/components/loading.vue'
+import { mapState } from 'pinia'
+import useStore from './store/index'
 
+export default {
+  components: {
+    loading
+  },
+  computed: {
+    ...mapState(useStore, [ 'loading' ])
+  }
+}
+</script>
 <style>
+html,body{
+  margin: 0;
+  padding: 0;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/pages/login/main.js

@@ -1,6 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { createPinia } from 'pinia'
+import '@/utils/rem.js'
+const store = createPinia()
 const app = createApp(App)
 app.use(router)
+  .use(store)
   .mount('#app')

src/pages/login/router/index.js

@@ -10,4 +10,4 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes
 })
-export default router
+export default router

src/pages/login/store/index.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+// vuex 写法
+const useStore = defineStore({
+  id: 'login', // id必填，且需要唯一
+  state: () => ({
+    loading: false
+  }),
+  getters: {
+
+  },
+  actions: {
+
+  }
+})
+export default useStore

src/pages/login/views/test.vue

@@ -4,17 +4,21 @@
   </div>
 </template>
 <script>
-import axios from '@/utils/axios'
-
+import { mapWritableState } from 'pinia'
+import useStore from '../store/index'
+import { sleep } from '@/utils/JsFn.js'
 export default {
   data() {
     return {
       test: '55555555555'
     }
   },
+  computed: {
+    ...mapWritableState(useStore, [ 'loading' ])
+  },
   async mounted() {
-    const txt = await axios.get('https://www.baidu.com')
-    console.log(666, txt)
+    await sleep(3000)
+    this.loading = true
   }
 }
 </script>