VUE中的pinia
1.新增user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore('userStore', {
actions: {
changeUserName(value: string) {
if (value && value.length < 10) this.username += value
},
},
getters: {
getUserName(): string {
return this.username.toUpperCase()
},
},
state() {
return {
username: 'aaaa',
age: 18,
sex: '男',
}
},
})
2.在app.vue使用
<template>
<div id="app">
<h1>TO DO LIST! {{ userInfo.username.value }}</h1>
<p>
<RouterLink to="/home">首页</RouterLink>
<RouterLink :to="{ path: '/about' }">关于</RouterLink>
<RouterLink replace :to="{ name: 'news' }">事项</RouterLink>
</p>
<div class="content">
<RouterView />
</div>
</div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/user.ts'
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
const user = useUserStore()
console.log(user.getUserName)
// 修改
user.$patch({
username: '小蓝',
})
user.changeUserName('小白')
const userInfo = storeToRefs(user)
</script>