UP

src/store/product.js

@@ -0,0 +1,23 @@
+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="form.name" />
+      <el-input v-model=" productStore.count" />
     </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: {{ tokenStore.count }}</p>
+        <p>Count: {{ productStore.count }}</p>
     </div>
 </template>
 
 <script setup>
-import { useTokenStore } from '../store/token.js';
+import { useProductStore } from '../store/product.js';
 
-const tokenStore=useTokenStore();
+const productStore=useProductStore();
 </script>
 
 <style scoped>

src/views/home.vue

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

test.http

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