043~046:尚硅谷pinia存储+读取数据,学习示例

2025-10-04 17:02:04 +08:00
parent ce5a18fefb
commit 900257f07e
14 changed files with 217 additions and 276 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "axios": "^1.12.2",
+        "pinia": "^3.0.3",
+        "uuid": "^13.0.0",
        "vue": "^3.5.22",
        "vue-router": "^4.5.1"
      },
@@ -1711,7 +1713,6 @@
      "version": "2.6.1",
      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.6.1.tgz",
      "integrity": "sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
@@ -1824,7 +1825,6 @@
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-what": "^4.1.8"
@@ -2336,7 +2336,6 @@
      "version": "5.5.3",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/human-signals": {
@@ -2427,7 +2426,6 @@
      "version": "4.1.16",
      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12.13"
@@ -2574,7 +2572,6 @@
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/mrmime": {
@@ -2795,6 +2792,66 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/pinia": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
+      "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+      "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.7"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
+      "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.7",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
+      "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/pinia/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -2863,7 +2920,6 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/rollup": {
@@ -3008,7 +3064,6 @@
      "version": "14.0.1",
      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=0.10.0"
@@ -3031,7 +3086,6 @@
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "copy-anything": "^3.0.2"
@@ -3149,6 +3203,19 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/uuid": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
    "node_modules/vite": {
      "version": "7.1.7",
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
  },
  "dependencies": {
    "axios": "^1.12.2",
+    "pinia": "^3.0.3",
+    "uuid": "^13.0.0",
    "vue": "^3.5.22",
    "vue-router": "^4.5.1"
  },
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,114 +1,14 @@
 <template>
-    <div class="app">
-        <h2 class="title">VUE路由测试实例</h2>
-        <!-- 导航区 -->
-         <div class="navigate">
-            <router-link replace :to="{name:'zhuye'}" active-class="active">首页</router-link>
-            <router-link replace to="/contact" active-class="active">联系</router-link>
-            <router-link to="/about" active-class="active">关于</router-link>
-            <router-link to="/news" active-class="active">新闻</router-link>
-        
-         </div>
+  <div>
+    <h1>我的App组件!</h1>
+    <Count />
+    <br />
+    <LoveTalk />
+  </div>
+</template>

-         <!-- 内容区 -->
-         <div class="main-content">
-            <router-view></router-view>
-         </div>
-       
-    </div>
+<script setup lang="ts" name="App">
+import Count from '@/components/Count.vue' // 导入Count组件的count变量
+import LoveTalk from './components/LoveTalk.vue';

-
-    </template>
-
-    <script setup lang="ts">
-    import {RouterView, RouterLink,useRouter} from 'vue-router'
-    import { onMounted } from 'vue';
-
-    const router = useRouter();
-
-    onMounted(() => {
-        // 当页面加载完成后，执行滚动到顶部的函数
-        setTimeout(() => {
-            router.push({ name: 'news' });
-            console.log('页面加载完成，执行滚动到顶部的函数');
-        }, 3000);
-    });
-   
-
-
-        
-    </script>
-
-<style scoped>
-
-/* 全局和根容器样式 */
-.app {
-  /* 使用更现代、更易读的字体 */
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  width: 90%; /* 设置最大宽度，在大屏幕上不会过宽 */
-  height: 800px; /* 设置一个固定的高度，防止内容过多时出现滚动条 */;
-  margin: 40px auto; /* 页面居中，并与顶部保持距离 */
-  padding: 2rem;
-  background-color: #f4f7f9; /* 一个非常浅的灰色背景 */
-  border-radius: 10px; /* 圆角让它看起来更柔和 */
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影，产生立体感 */
-  color: #333;
-}
-
-/* 标题样式 */
-.title {
-  text-align: center; /* 标题居中 */
-  color: #ebc313; /* 使用更深的颜色以突出 */
-  margin-bottom: 2rem; /* 与导航栏拉开距离 */
-  font-weight: 600;
-  font-size: 4rem; /* 更大的字体大小 */
-  background-color: #397c68;
-}
-
-/* 导航容器 */
-.navigate {
-  display: flex; /* 使用 Flexbox 布局，让链接水平排列 */
-  justify-content: center; /* 链接在容器内居中 */
-  gap: 1rem; /* 链接之间的间距 */
-  background-color: #ffffff;
-  padding: 1rem;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0; /* 添加一个细微的边框 */
-  margin-bottom: 2rem;
-}
-
-/* 导航链接 */
-.navigate a {
-  text-decoration: none; /* 去掉下划线 */
-  color: #555; /* 默认链接颜色 */
-  padding: 0.75rem 1.5rem; /* 增大点击区域 */
-  border-radius: 6px; /* 为链接本身也添加圆角 */
-  font-weight: 500; /* 字体稍粗 */
-  transition: all 0.3s ease; /* 为所有变化添加平滑的过渡效果 */
-  position: relative; /* 为下划线动画做准备 */
-  overflow: hidden;
-}
-
-/* 鼠标悬停在链接上时的效果 */
-.navigate a:hover {
-  background-color: #eef2f5; /* 悬停时改变背景色 */
-  color: #007bff; /* 悬停时改变字体颜色 */
-}
-
-/* 当前激活的链接样式 (.active 类) */
-.navigate a.active {
-  background-color: #007bff; /* 使用一个醒目的主色调 */
-  color: #ffffff; /* 字体变为白色 */
-  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3); /* 为激活项添加一点阴影 */
-}
-
-/* 内容显示区域 */
-.main-content {
-  padding: 2rem;
-  background-color: #ffffff;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  min-height: 70%; /* 设置一个最小高度，防止内容过少时塌陷 */
-  /* 你可以为 router-view 的过渡动画添加样式 */
-}
-</style>
+</script>
--- a/src/components/Count.vue
+++ b/src/components/Count.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="count">
+    <h2>当前求和为Count: {{ countStore.sun }}</h2>
+    <select v-model.number="n">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+    <button @click="increment">加数值</button>
+    <button @click="decrement">减数值</button>
+  </div>    
+</template>
+
+<script setup lang="ts">
+
+import { ref } from 'vue' // 导入ref函数，用于创建响应式变量
+
+import {useCountStore} from '@/store/count'
+const countStore = useCountStore()
+console.log(countStore.sun)
+
+
+let n = ref(1) // 创建一个响应式变量count，初始值为10
+
+function increment() { // 定义加数值的函数
+
+}
+
+function decrement() { // 定义减数值的函数
+
+}
+</script>
+
+<style scoped>
+
+.count {
+  border-radius: 10px;
+  padding: 10px;
+  background-color: rgb(143, 209, 229);
+  box-shadow: 0 0 10px;
+  
+}
+button {
+  margin: 10px;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+</style>
--- a/src/components/LoveTalk.vue
+++ b/src/components/LoveTalk.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="talk">
+    <button @click="getLoveTaik">获取一句土味情话!</button>
+    <ul>
+        <li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.title }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { reactive } from 'vue' // 导入ref函数，用于创建响应式数据
+
+import axios from 'axios'
+
+import { v4 as uuidv4 } from 'uuid';
+
+import {useLoveTalkStore} from '@/store/lovetalk'
+
+const talkStore = useLoveTalkStore()
+
+// let talkList = reactive([{id:'hasdhashdh01',title:'你今天有点怪,哪里怪?怪好看的!'},
+// {id:'hasdhashdh02',title:'你今天有点怪,哪里怪?怪好看的!'},
+// {id:'hasdhashdh03',title:'你今天有点怪,哪里怪?怪好看的!'},
+// ]) // 创建一个响应式数据，初始值为0
+
+async function getLoveTaik() {
+
+    const {data} = await axios.get('https://api.oddfar.com/yl/q.php?c=2004&encode=text')
+    //console.log(result.data);
+    let obj = {id:uuidv4(),title:data}
+    // talkList.unshift(obj)
+    talkStore.talkList.unshift(obj)
+    console.log(obj);
+
+  
+}
+
+</script>
+
+<style scoped>
+
+.talk {
+border-radius: 10px;
+  padding: 10px;
+  background-color: rgb(182, 184, 91);
+  box-shadow: 0 0 10px;
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,14 @@
 import { createApp } from "vue";
 // 引入App组件
 import App from "./App.vue";
-// 引入路由
-import router from "./router";
+//引入pinia
+import { createPinia } from "pinia";
+// 创建Pinia实例
+const pinia = createPinia();
 // 创建Vue应用程序实例
 const app = createApp(App);
-// 使用路由
-app.use(router);
+// 使用Pinia
+app.use(pinia);
+
 // 挂载应用程序到指定容器
 app.mount("#app");
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <h1>About关于页面,---===---阿萨大大缓解按时鉴定会叫爸爸回家的回家巴哈是不喝酒的巴哈说不定就不会节哀顺变</h1>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-import { onMounted,onUnmounted } from 'vue';
-onMounted(()=>{
-  console.log('About页面挂载了')
-})
-onUnmounted(()=>{
-  console.log('About页面卸载了')
-})
-</script>
--- a/src/pages/Contact.vue
+++ b/src/pages/Contact.vue
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>Contact新闻页面---===---阿三大苏打姐姐爱神的箭阿三觉得可能今年爱上电话报警啊环保手机电话报警啊是比较</h1>
-  </div>
-</template>
--- a/src/pages/Detail.vue
+++ b/src/pages/Detail.vue
@@ -1,25 +0,0 @@
-<template>
-  <div class="detail">
-    <ul>
-        <li>标题:{{ title }}</li>
-        <li>内容:{{ content}}</li>
-        <li>时间</li>
-        <li>编号:{{ id }}</li>
-        <li>来源</li> 
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps(['id','title','content'])
-</script>
-
-<style scoped>
-
-.detail li{
-    list-style: none;
-    font-size: 1.5rem;
-    color: #16a04b;
-}
-
-</style>
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>Home啊实打实大苏打实打实多久啊是觉得就卡死</h1>
-  </div>
-</template>
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -1,77 +0,0 @@
-<template>
-  <div class="news">
-    
-    <ul>
-      <li v-for="news in newsList" :key="news.id">
-        <!-- <router-link class="biao" :to="`/news/detail?id=${news.id}===标题=${news.title}===内容=${news.content}`">{{ news.title }}</router-link> -->
-      <button @click="showNewsDetail(news)">查看新闻按钮</button>
-        <router-link class="biao" 
-      :to="{name:'neirong',query:{
-        id:news.id,
-        title:news.title,
-        content:news.content
-        }}">{{ news.title }}
-        </router-link>
-    </li>
-    </ul>
-    <div class="news-cencont">
-        <router-view></router-view>
-    </div>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-
-import { reactive } from 'vue';
-import { RouterView, RouterLink, useRouter } from 'vue-router'; // 导入 useRoute 钩子函数
-
-const router = useRouter(); // 使用 useRouter 钩子函数获取路由对象
-
-interface NewsInter{
-  id:string,
-  title:string,
-  content:string
-}
-
-function showNewsDetail(news:NewsInter) {
-  router.push({name:'neirong',query:{
-        id:news.id,
-        title:news.title,
-        content:news.content
-        }}); // 使用 router.push 方法跳转到指定的路由
-}
-// 假设我们有一个新闻列表
-const newsList = reactive([
-  { id: 'ahxcjadh01',title: '新闻一大师哈哈是的和环境', content: '这是新闻一的内容。' },
-  { id: 'ahxcjadh02',title: '新闻二啊uhi是否会卡斯克和附件', content: '这是新闻二的内容。' },
-  { id: 'ahxcjadh03',title: '新闻三奥数复活节卡卡是复活节', content: '这是新闻三的内容。' },
-  { id: 'ahxcjadh04',title: '新闻四u发数据库和纳税JFK你', content: '这是新闻四的内容。' },
-  { id: 'ahxcjadh05',title: '新闻五安分守己你看JFK三', content: '这是新闻五的内容。' }
-])
-</script>
-
-<style scoped>
-    .news-cencont{
-    width: 60%;
-    height: 300px;
-    margin-left: 35%;
-    margin-top: -8%;
-    /* text-align: center; */
-    padding-top: 1%;
-    background-color: #f4f7f9; /* 一个非常浅的灰色背景 */
-    border-radius: 10px; /* 圆角让它看起来更柔和 */
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影，产生立体感 */
-    color: #333;
-    }
-    .news ul {
-        color: #1ba04e;
-        font-size: 1.8rem;
-     
-    }
-    .biao {
-       color: #a709f1;
-    }
-    
-    
-    </style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,25 +0,0 @@
-//引入createRouter
-import { createRouter, createWebHistory} from 'vue-router'
-//引入组件
-import Home from '@/pages/Home.vue'
-import About from '@/pages/About.vue'
-import Contact from '@/pages/Contact.vue'
-import News from '@/pages/News.vue'
-import Detail from '@/pages/Detail.vue'
-
-const router = createRouter({
-    // 配置路由模式，这里使用的是hash模式，也可以使用history模式，具体可以查看vue-router的文档
-    history: createWebHistory(),
-    routes: [
-        { path: '/home',name:'zhuye', component: Home },
-        { path: '/about', component: About },
-        { path: '/contact', component: Contact },
-        { name:'news',path: '/news', component: News, children:[
-            { name:'neirong',path: 'detail', component: Detail, props: route =>  {return route.query} } 
-        ]  },
-        { path: '/', redirect: '/home' }
-
-    ],
-})
-
-export default router;
--- a/src/store/count.ts
+++ b/src/store/count.ts
@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+
+export const useCountStore = defineStore('count',{
+    // 状态
+    state:()=>{
+        return {
+            sun:100
+        }
+    
+    }
+})
--- a/src/store/lovetalk.ts
+++ b/src/store/lovetalk.ts
@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+
+export const useLoveTalkStore = defineStore('talk',{
+    // 状态
+    state:()=>{
+        return {
+            talkList:[{id:'hasdhashdh01',title:'你今天有点怪,哪里怪?怪好看的!'},
+{id:'hasdhashdh02',title:'你今天有点怪,哪里怪?怪好看的!'},
+{id:'hasdhashdh03',title:'你今天有点怪,哪里怪?怪好看的!'},]
+        }
+    
+    }
+})