83 lines
1.5 KiB
Markdown
83 lines
1.5 KiB
Markdown
|
/**
|
||
|
|
* Pinia Store 使用示例
|
||
|
|
*
|
||
|
|
* 在组件中使用 user store 的方法：
|
||
|
|
*/
|
||
|
|
|
||
|
|
// 1. 导入 store
|
||
|
|
import { useUserStore } from '@/store/user'
|
||
|
|
|
||
|
|
// 2. 在 setup 中使用
|
||
|
|
export default {
|
||
|
|
setup() {
|
||
|
|
const userStore = useUserStore()
|
||
|
|
|
||
|
|
// 获取 token
|
||
|
|
const token = userStore.getToken
|
||
|
|
|
||
|
|
// 判断是否登录
|
||
|
|
const isLogin = userStore.isLogin
|
||
|
|
|
||
|
|
// 设置 token
|
||
|
|
userStore.setToken('your-token-here')
|
||
|
|
|
||
|
|
// 登录
|
||
|
|
userStore.login('your-token-here', {
|
||
|
|
id: 1,
|
||
|
|
name: '用户名',
|
||
|
|
avatar: '头像地址'
|
||
|
|
})
|
||
|
|
|
||
|
|
// 退出登录
|
||
|
|
userStore.logout()
|
||
|
|
|
||
|
|
return {
|
||
|
|
token,
|
||
|
|
isLogin
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 或者使用 Composition API
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
setup() {
|
||
|
|
const userStore = useUserStore()
|
||
|
|
|
||
|
|
// 使用 getter
|
||
|
|
const isLogin = computed(() => userStore.isLogin)
|
||
|
|
const token = computed(() => userStore.getToken)
|
||
|
|
|
||
|
|
// 调用 action
|
||
|
|
const handleLogin = () => {
|
||
|
|
userStore.login('token-123', {
|
||
|
|
id: 1,
|
||
|
|
name: '张三'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
isLogin,
|
||
|
|
token,
|
||
|
|
handleLogin
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 在 script setup 中使用
|
||
|
|
// <script setup>
|
||
|
|
// import { useUserStore } from '@/store/user'
|
||
|
|
//
|
||
|
|
// const userStore = useUserStore()
|
||
|
|
// const token = userStore.getToken
|
||
|
|
// const isLogin = userStore.isLogin
|
||
|
|
//
|
||
|
|
// // 登录
|
||
|
|
// userStore.login('token', userInfo)
|
||
|
|
//
|
||
|
|
// // 退出
|
||
|
|
// userStore.logout()
|
||
|
|
// </script>
|
||
|
|
|