<template><div class="talk"><button @click="getLoveTalk">土味情話</button><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.title }}</li></ul> </div>
</template><script setup lang="ts" name="LoveTalk">
import { useTalkStore } from '@/stores/loveTalk'const talkStore = useTalkStore()
// 持久保存talkList
talkStore.$subscribe((mutation, state) => {localStorage.setItem('talkList', JSON.stringify(state.talkList))
})
// 方法
async function getLoveTalk() {talkStore.getATalk()
}
</script>
<style scoped>
.talk {display: flex;flex-direction: column;align-items: center;justify-content: center;box-shadow: 1px 1px 10px  #4caf50;border-radius: 10px;font-size: 15px;}
button {/* margin-right: 10px;margin-left: 10px; */text-align: center;background-color: #4caf50;color: white;padding: 10px;border: none;border-radius: 5px;cursor: pointer;position: absolute;top: 80px;left: 35px;}
</style>

腳本

import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'
// import { reactive } from 'vue'
export const useTalkStore = defineStore('talk', {actions: {async getATalk() {// 方法名可以隨便起，但是要和定義的actions方法名一致const { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')//  把請求到的內容包裝成字符串包裝成對象，然后添加到talkList中const obj = { id: nanoid(), title }this.talkList.unshift(obj)}},state() {return {talkList:JSON.parse(localStorage.getItem('talkList') || '[]')}},/* 以下是修改組合式的代碼 還 需要修改*/
//   const talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || []),
//   async function getATalk(){
//   // 方法名可以隨便起，但是要和定義的actions方法名一致
//   let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//         //  把請求到的內容包裝成字符串包裝成對象，然后添加到talkList中
//        let obj = { id: nanoid(), title }
//    talkList.unshift(obj)
//       }
// return { talkList, getATalk }})

?App樣式：

<template><MyBiaoZhi msg="與妖為鄰" class="App-logo" /><div class="parent"><header><nav><ul class="App_ul"><liclass="App_li"v-for="(menuItem, menuIndex) in menuItems":key="menuIndex"@click="toggleSubMenu(menuIndex as number)":class="{ active: activeMenuItem === menuIndex }"><RouterLink replace :to="{ path: '/' }">{{ menuItem.label1 }}</RouterLink><RouterLink replace :to="{ path: '/WangZhan' }">{{ menuItem.label2 }} </RouterLink><RouterLink replace :to="{ path: '/XueXi' }">{{ menuItem.label3 }}</RouterLink><RouterLink replace :to="{ name: 'About' }"> {{ menuItem.label4 }}</RouterLink></li></ul></nav><!-- <BeiJingShiJian /> --></header><div class="left_side"></div><div class="right_side"></div><div class="div4"><RouterView /></div></div>
</template>
<script setup lang="ts" name="App">
// import BeiJingShiJian from './BeiJingShiJian.vue'
import MyBiaoZhi from './MyBiaoZhi.vue'
import { ref } from 'vue'
let menuItems = ref([{ label1: '首頁' },{ label2: '網站' },{ label3: '學習' },{ label4: '關于' }
])
let activeMenuItem = ref() // 當前激活的菜單項索引
let activeSubMenu = ref()
function toggleSubMenu(menuIndex: any) {activeMenuItem.value = menuIndex // 設置當前激活的菜單項索引activeSubMenu.value = activeSubMenu.value === menuIndex ? null : menuIndex
}
</script>
<style scoped lang="scss">
.parent {/* https://cssgrid-generator.netlify.app/ *//* 網格布局 */display: grid;/* 列數: 34; */grid-template-columns: repeat(34, 1fr);/* 行數: 19; */grid-template-rows: repeat(19, 1fr);/* 列間距: 5px; */grid-column-gap: 5px;/* 行間距: 5px; */grid-row-gap: 2px;
}header {grid-area: 1 / 1 / 3 / 35;height: 4rem;border: 1px solid rgba(0, 213, 255, 0.4);
}
ul {display: flex;top: 0rem;left: 20rem;text-align: center;position: relative;li {width: 80px;height: 53px;padding: 5px;perspective: 700px;cursor: pointer;margin-left: 1rem;transition: color 0.3s;border-radius: 10px;font-size: 2rem;background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow:inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);border: 0px solid black;// box-shadow:// 0 0 10px 2px rgba(0, 0, 0, 0.2),// 0 0 1px 2px black,// inset 0 2px 2px -2px white,// inset 0 0 2px 8px #4c4343,// inset 0 0 2px 22px #000000;}a {// 去掉下劃線text-decoration: none;background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);background-size: 5px 5px;border-radius: 5px;&:hover {color: #ffc97e;}}
}
li.active {box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.589),inset 2px 2px 3px rgba(0, 0, 0, 0.6);a {color: #e63c3c;}
}
li.active::before {border-radius: 10px;content: '';position: absolute;top: 0;left: 0;right: 0;height: 50px;width: 80px;animation: flicker 0.2s infinite 0.3s;z-index: -1;background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);}
.left_side {grid-area: 3 / 1 / 170 / 4;border: 1px solid rgba(0, 213, 255, 0.4);display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;font-size: 3rem;
}
.right_side {grid-area: 3 / 32 / 170 / 35;border: 1px solid rgba(0, 213, 255, 0.4);
}
.div4 {grid-area: 3 / 4 / 170 / 32;box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);border-radius: 20px;
}
@keyframes flicker {0% {opacity: 1;}80% {opacity: 0.8;}100% {opacity: 1;}
}
</style>