64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
||
<div class="talk">
|
||
<button @click="getLoveTaik">获取一句土味情话!</button>
|
||
<ul>
|
||
<li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
|
||
import { reactive } from 'vue' // 导入ref函数，用于创建响应式数据
|
||
|
||
import axios from 'axios'
|
||
|
||
import {storeToRefs} from 'pinia'
|
||
|
||
import { ulid } from 'ulid';
|
||
|
||
import {useLoveTalkStore} from '@/store/lovetalk'
|
||
|
||
const talkStore = useLoveTalkStore()
|
||
|
||
let {talkList} = storeToRefs(talkStore)
|
||
|
||
talkStore.$subscribe((mutate,state)=>{ // 订阅数据变化
|
||
console.log('数据变化了',mutate,state);
|
||
localStorage.setItem('talkList',JSON.stringify(state.talkList))
|
||
})
|
||
|
||
// 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:ulid(),title:data}
|
||
// talkList.unshift(obj)
|
||
talkStore.talkList.unshift(obj)
|
||
console.log(obj);
|
||
|
||
|
||
}
|
||
const {data} = await axios.get('https://api.oddfar.com/yl/q.php?c=2004&encode=text')
|
||
//console.log(result.data);
|
||
let obj = {id:ulid(),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> |