面试题：Vue中Pinia Store的基础定义与简单使用场景

Vue Pinia Store 是什么

Pinia 是 Vue.js 的一款状态管理库，它是 Vuex 的替代方案。与 Vuex 相比，Pinia 更加轻量级，拥有更简洁的 API，支持 Vue3 的 Composition API 风格书写，且对 TypeScript 有更好的支持。它能帮助开发者更好地管理 Vue 应用程序中的共享状态，将状态、状态变更逻辑以及与状态相关的副作用进行集中管理。

在简单用户登录状态管理场景中定义和使用 Pinia Store

安装 Pinia 在项目中如果还没有安装 Pinia，通过 npm 或 yarn 进行安装：
```
npm install pinia
# 或者
yarn add pinia
```
定义 Pinia Store 在 src/store 目录下（假设）创建一个 userStore.js 文件，内容如下：
```
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false,
    userInfo: null
  }),
  actions: {
    login(userData) {
      this.isLoggedIn = true
      this.userInfo = userData
    },
    logout() {
      this.isLoggedIn = false
      this.userInfo = null
    }
  }
})
```
- state 函数返回一个对象，用于定义状态。这里定义了 isLoggedIn 表示用户是否登录，userInfo 用于存储用户信息。
- actions 定义了修改状态的方法。login 方法用于模拟用户登录，更新登录状态和用户信息；logout 方法用于模拟用户登出，重置状态。

在组件中使用 Pinia Store 在 Vue 组件中使用这个 Store，例如在 Login.vue 组件中：

<template>
  <div>
    <button v-if="!userStore.isLoggedIn" @click="handleLogin">登录</button>
    <button v-if="userStore.isLoggedIn" @click="handleLogout">登出</button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/userStore'
const userStore = useUserStore()

const handleLogin = () => {
  const mockUserData = { name: 'testUser', age: 20 }
  userStore.login(mockUserData)
}

const handleLogout = () => {
  userStore.logout()
}
</script>

在上述组件中，根据 userStore.isLoggedIn 的状态显示不同的按钮，并通过调用 userStore 的 login 和 logout 方法来更新用户登录状态。

星途面试题库

面试题：Vue中Pinia Store的基础定义与简单使用场景

知识考点

面试题答案

Vue Pinia Store 是什么

在简单用户登录状态管理场景中定义和使用 Pinia Store