前端工程化：pinia

本文为个人学习笔记整理，仅供交流参考，非专业教学资料，内容请自行甄别。

---

前言

  Pinia是Vue.js官方推荐的状态管理库，什么是状态管理库？状态管理库是用于管理应用程序中共享状态的工具，核心作用是解决
多个组件之间的数据共享、状态同步和逻辑复用的问题。类似于JAVA中的ThreadLocal，或Redis。
  为什么需要状态管理？在复杂的 Vue 应用中，组件之间的关系可能很复杂（如父子、兄弟、跨层级组件），如果仅通过props传递数据或$emit触发事件，会导致：

• 数据传递链路过长（如跨多层级组件），维护困难；
• 多个组件依赖同一份数据时，难以同步更新（如一个组件修改数据后，其他依赖组件无法自动感知）；
• 业务逻辑分散在各个组件中，复用和调试成本高。

  状态管理库通过将共享数据集中存储，并提供统一的读写规则，让所有组件都能高效地访问和修改这些数据，确保状态变化的可预测性。
  状态管理库的核心能力，首先是集中存储，将共享状态从组件中抽离，统一存放在 “仓库（Store）” 中，所有组件都能从仓库中获取数据。并且支持响应式更新，当仓库中的状态发生变化时，所有依赖该状态的组件会自动重新渲染。
  常见的状态管理库，除了Pinia，还有Vuex等选择。

一、初始化Pinia

  首先需要通过如下的命令，在项目中引入Pinia：

npm install pinia

  并且需要在main.js中进行挂载：

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

  上述配置完成后，创建具体的store存储文件，在store中有三个概念：

• state：用于存储组件的状态数据。
• getter：用于对state中的数据进行计算或加工处理后返回。
• action：用于定义对于状态数据的业务逻辑的处理

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useLoginUserStore = defineStore('loginUser', () => {const loginUser = ref<any>({userName: '未登录',})async function fetchLoginUser() {// todo 由于后端还没提供接口，暂时注释// const res = await getCurrentUser();// if (res.data.code === 0 && res.data.data) {//   loginUser.value = res.data.data;// }setTimeout(() => {loginUser.value = { userName: '测试用户',id:1848 }}, 3000)}function setLoginUser(newLoginUser: any) {loginUser.value = newLoginUser}return { loginUser, setLoginUser, fetchLoginUser }
})

二、业务处理

  如果需要在其他组件使用刚刚定义好的store，则需要先在script标签中引入：

const loginUserStore = useLoginUserStore()
loginUserStore.fetchLoginUser()

  然后具体的进行处理，可以取出其中的属性用于判断，也可以调用store中的方法。

<!--          从全局状态管理器中取出用户id-->
<div v-if="loginUserStore.loginUser.id">{{ loginUserStore.loginUser.userName ?? '褪色者' }}
</div>

---