diff --git a/package-lock.json b/package-lock.json index 6786c58..21d59fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "axios": "^1.12.2", "pinia": "^3.0.3", + "ulid": "^3.0.1", "uuid": "^13.0.0", "vue": "^3.5.22", "vue-router": "^4.5.1" @@ -3135,6 +3136,15 @@ "node": ">=14.17" } }, + "node_modules/ulid": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ulid/-/ulid-3.0.1.tgz", + "integrity": "sha512-dPJyqPzx8preQhqq24bBG1YNkvigm87K8kVEHCD+ruZg24t6IFEFv00xMWfxcC4djmFtiTLdFuADn4+DOz6R7Q==", + "license": "MIT", + "bin": { + "ulid": "dist/cli.js" + } + }, "node_modules/undici-types": { "version": "6.21.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", diff --git a/package.json b/package.json index 12c0b12..d60376f 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "axios": "^1.12.2", "pinia": "^3.0.3", + "ulid": "^3.0.1", "uuid": "^13.0.0", "vue": "^3.5.22", "vue-router": "^4.5.1" diff --git a/src/components/Count.vue b/src/components/Count.vue index fa8d495..4285f7b 100644 --- a/src/components/Count.vue +++ b/src/components/Count.vue @@ -1,6 +1,7 @@ @@ -13,12 +13,21 @@ import { reactive } from 'vue' // 导入ref函数,用于创建响应式数据 import axios from 'axios' -import { v4 as uuidv4 } from 'uuid'; +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:'你今天有点怪,哪里怪?怪好看的!'}, @@ -28,7 +37,7 @@ 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} + let obj = {id:ulid(),title:data} // talkList.unshift(obj) talkStore.talkList.unshift(obj) console.log(obj); diff --git a/src/store/count.ts b/src/store/count.ts index d7dc9de..6901b60 100644 --- a/src/store/count.ts +++ b/src/store/count.ts @@ -1,11 +1,29 @@ import { defineStore } from "pinia"; +import { shallowRef } from "vue"; export const useCountStore = defineStore('count',{ + actions:{ + increment(value:number){ + if(this.sun >= 200){ + console.log('sun的值已经大于200了'); + return; + } + this.sun += value; + console.log('sun的值被更改了',this.sun); + } + }, // 状态 state:()=>{ return { - sun:100 + sun:100, + school:'北京大学', + address:'北京' } + }, + getters:{ + bigSun(state):number{ + return state.sun * 10; + } } }) \ No newline at end of file diff --git a/src/store/lovetalk.ts b/src/store/lovetalk.ts index 251eef6..d2be74c 100644 --- a/src/store/lovetalk.ts +++ b/src/store/lovetalk.ts @@ -1,13 +1,20 @@ import { defineStore } from "pinia"; -export const useLoveTalkStore = defineStore('talk',{ - // 状态 - state:()=>{ - return { - talkList:[{id:'hasdhashdh01',title:'你今天有点怪,哪里怪?怪好看的!'}, -{id:'hasdhashdh02',title:'你今天有点怪,哪里怪?怪好看的!'}, -{id:'hasdhashdh03',title:'你今天有点怪,哪里怪?怪好看的!'},] - } +import { reactive } from "vue"; + +// export const useLoveTalkStore = defineStore('talk',{ +// // 状态 +// state:()=>{ +// return { +// talkList:JSON.parse(localStorage.getItem('talkList') as string) || [] +// } +// } +// }) + +export const useLoveTalkStore = defineStore('talk',()=>{ + const talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || []) + return { + talkList } }) \ No newline at end of file