src/store/product.js

@@ -1,23 +0,0 @@
-import {defineStore} from 'pinia'
-
-
-export const useProductStore = defineStore('product', {
-    state: () => ({
-      products: [],
-      total: 0,
-    }),
-    actions: {
-      productSet(data,total) {
-        this.products = data;
-        // this.products.push(...data); //追加数据
-        this.total=total; //这里会更新
-      },
-      productTotalSet(total){
-        this.total=total
-      }
-    },
-    getters: {
-      count: (state) => state.products.length,
-      total: (state) => state.total,
-    }
-  })

src/views/about.vue

@@ -2,7 +2,7 @@
     <template>
   <el-form :model="form" label-width="auto" style="max-width: 600px">
     <el-form-item label="Activity name">
-      <el-input v-model=" productStore.count" />
+      <el-input v-model="form.name" />
     </el-form-item>
     <el-form-item label="Activity zone">
       <el-select v-model="form.region" placeholder="please select your zone">
@@ -66,14 +66,14 @@
 </template>
     <div>
         <p>hello about</p>
-        <p>Count: {{ productStore.count }}</p>
+        <p>Count: {{ tokenStore.count }}</p>
     </div>
 </template>
 
 <script setup>
-import { useProductStore } from '../store/product.js';
+import { useTokenStore } from '../store/token.js';
 
-const productStore=useProductStore();
+const tokenStore=useTokenStore();
 </script>
 
 <style scoped>

src/views/home.vue

@@ -1,7 +1,9 @@
 <template>
     <div>
         <p>hello home</p>
-        <p>Count: {{ productStore.count}}</p>
+        <p>Count: {{ tokenStore.count }}</p>
+        <button @click="tokenStore.increment">Increment</button>
+        <button @click="tokenStore.incrementAsync">Increment Async</button>
         <router-link to="/about">About</router-link>
         <el-alert
         v-if="showAlert"
@@ -17,27 +19,26 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import { storeToRefs } from 'pinia'; 
+import { ref } from 'vue';
 import request from '../api/request.js'
-import { useProductStore } from '../store/product.js';
+import { useTokenStore } from '../store/token.js';
+
+const tokenStore=useTokenStore()
 
 // 定义用于控制 el-alert 显示的变量
 const showAlert = ref(false);
 const alertTitle = ref('');
 const alertType = ref('warning');
 const alertDescription = ref('');
-const productStore=useProductStore();
+
 const fetchData = async()=>{
   try {
-    const response=await request.get('/api/product');
-    productStore.productSet(response.data,100); 
+    const response=await request.get('/api/product')
+    console.log(response)
   } catch (error) {
-    console.log(error);
+    alertTitle.value = 'Error';
+    alertDescription.value = error.message;
+    showAlert.value = true;
   }
 }
-
-onMounted(()=>{
-  fetchData()
-})
 </script>

test.http

@@ -1 +0,0 @@
-GET http://w3.myschools.me/api/product HTTP/1.1