面试题：Vue中Vue Composition API与Pinia结合实现状态管理的基础用法

Question

请阐述在Vue项目中，如何使用Vue Composition API引入Pinia并创建一个简单的状态管理模块，例如管理一个用户登录状态，包括展示基本的代码结构和逻辑。

Answer 1

1. 安装Pinia： 在Vue项目中，首先需要安装Pinia。如果使用npm，运行以下命令：

   npm install pinia
   

   如果使用yarn：

   yarn add pinia
   

2. 在Vue项目中引入Pinia： 在main.js（Vue 3项目）中引入并使用Pinia：

   import { createApp } from 'vue'
   import { createPinia } from 'pinia'
   import App from './App.vue'
   
   const app = createApp(App)
   const pinia = createPinia()
   app.use(pinia)
   app.mount('#app')
   

3. 创建状态管理模块： 在src/store目录下（通常约定放在此目录，可自行调整）创建一个文件，例如userStore.js。

   import { defineStore } from 'pinia'
   
   export const useUserStore = defineStore('user', {
     state: () => ({
       isLoggedIn: false
     }),
     actions: {
       login() {
         this.isLoggedIn = true
       },
       logout() {
         this.isLoggedIn = false
       }
     }
   })
   

   上述代码使用defineStore定义了一个名为user的store。state函数返回初始状态，这里有一个isLoggedIn属性表示用户登录状态。actions定义了两个方法login和logout，用于修改isLoggedIn的值。
4. 在组件中使用状态管理模块： 假设在一个Home.vue组件中使用：

   <template>
     <div>
       <button v-if="!userStore.isLoggedIn" @click="userStore.login">登录</button>
       <button v-if="userStore.isLoggedIn" @click="userStore.logout">登出</button>
       <p v-if="userStore.isLoggedIn">您已登录</p>
     </div>
   </template>
   
   <script setup>
   import { useUserStore } from '../store/userStore.js'
   const userStore = useUserStore()
   </script>
   

   在组件的<script setup>中，引入useUserStore并调用它，获取store实例userStore，然后在模板中根据userStore.isLoggedIn的值来显示不同的按钮和提示信息，并通过userStore.login和userStore.logout方法来修改登录状态。