【小兔鲜】day02 Pinia、项目起步、Layout

news2025/4/25 16:00:47

【小兔鲜】day02 Pinia、项目起步、Layout

1. Pinia
2. 添加Pinia到Vue项目
3. 案例：Pinia-counter基础使用
- 3.1 Store 是什么？
- 3.2 应该在什么时候使用 Store?
4. Pinia-getters和异步action
- 4.1 getters
- 4.2 action如何实现异步

1. Pinia

Pinia 是 Vue 的专属的最新状态管理库，是 Vuex 状态管理工具的替代品。

在这里插入图片描述

提供更加简单的API （去掉了 mutation ）
提供符合组合式风格的API （和 Vue3 新语法统一）
去掉了 modules 的概念，每一个 store 都是一个独立的模块
搭配 TypeScript 一起使用提供可靠的类型推断

2. 添加Pinia到Vue项目

官方文档 https://pinia.vuejs.org/zh/

在这里插入图片描述

1.安装Pinia

npm install pinia

(base) ➜  vue3-basic-project git:(complete)  npm install pinia

added 18 packages, removed 4 packages, and changed 17 packages in 2s

23 packages are looking for funding
  run `npm fund` for details

package.json

{
  "name": "vue3-demo-template",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "element-plus": "^2.2.19",
    "pinia": "^3.0.1",
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.2",
    "mockjs": "^1.1.0",
    "vite": "^3.1.8",
    "vite-plugin-mock": "^2.9.6"
  }
}

2.使用
创建一个 pinia 实例 (根 store) 并将其传递给应用：

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

3. 案例：Pinia-counter基础使用

使用Pinia实现计数器案例
在这里插入图片描述

import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

3.1 Store 是什么？

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

3.2 应该在什么时候使用 Store?

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。

另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。

并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松。

4. Pinia-getters和异步action

4.1 getters

Getter 完全等同于 store 的 state 的计算值。可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数，并且它将接收 state 作为第一个参数：

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})