前言：
当我们构建一个中大型单页应用，需要考虑如何更好地在组件外部管理状态的时候，我们就会借助一些状态管理器帮助我们完成这些操作。
相比于 Vuex，Pinia 提供了更简洁直接的组合式风格的API(去掉了 mutation )，action可以支持同步和异步。去掉了 modules 的概念，每一个 store 都是一个独立的模块。
其次，在使用 TypeScript 时也提供了比较完善的类型推导。所以在开发vue3的项目的时候，我们更为推荐使用pinia。
安装pinia
推荐使用pnpm包管理器进行安装
pnpm install pinia
# or with yarn
yarn add pinia
# or with npm
npm install pinia
创建pinia 实例
通过createPinia这个api去创建pinia状态管理器
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')
定义store示例
通过pinia提供的defineStore去创建store
import { defineStore } from 'pinia'
//您可以将'defineStore（）'的返回值命名为任意名称，
//但最好使用store的名称，并用“use”将其包围,这是一个不错的规范
//（例如`useUserStore`、`useCartStore`和`useProductStore`）
//第一个参数是应用程序中存储的唯一id
export const useAdminStore = defineStore('admin', {
// 其他选项...
})
//定义一个完整的store
//与 Vue的选项API类似，我们也可以传递带有属性的选项对象。state actions getters
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0, name: 'Eduardo' }),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})
//您可以将其视为store的属性，也可以将其视为vue的属性，
//state => data
//getters => computed
//actions => methods
//这样会更容易记忆
/* 还有另一种可能的语法来定义存储。与 Vue3组合API的设置函数类似，
我们可以传入一个函数来定义反应式属性和方法，并返回一个包含我们要公
开的属性和方法的对象。*/
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const name = ref('Eduardo')
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, name, doubleCount, increment }
})
使用pinia
<script setup>
import { useAdminStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const store = useAdminStore()
//结构并赋予响应性
const { name } = storeToRefs(store)
console.log('name',name)
</script>
剖析pinia各个选项
state
存储和管理数据
//给 state 加上类型推导
interface UserInfo {
name: string
age: number
}
export const useUserStore = defineStore('user', {
state: () => {
return {
userList: [] as UserInfo[],
user: null as UserInfo | null,
}
},
})
//或者给整个state加上类型推导
interface UserInfo {
name: string
age: number
}
interface State {
userList: UserInfo[]
user: UserInfo | null
}
export const useUserStore = defineStore('user', {
state: (): State => {
return {
userList: [],
user: null,
}
},
})访问state
import { useAdminStore } from '@/stores/user'
const store = useAdminStore()
console.log('name',store.name)重置state
通过调用$reset()去重置store
import { useAdminStore } from '@/stores/user'
const store = useAdminStore()
store.$reset()更改state
直接改变或者调用$patch去更改相关的state
//1.直接改变
store.name = 'new name'
//2.$patch
store.$patch({
sex: 1,
age: store.age + 1,
name: 'new name',
})
//或
useUserStore.$patch((state) => {
state.items.push({ name: 'jack', age: 18 })
state.ishasStatus = true
})getters
定义getters
类似于计算属性，根据state自动计算
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},
})
//添加类型约束
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
getters: {
// automatically infers the return type as a number
doubleCount(state) {
return state.count * 2
},
// the return type **must** be explicitly set
doublePlusOne(): number {
// autocompletion and typings for the whole store ✨
return this.doubleCount + 1
},
},
})
访问getters
<template>
<p>Double count is {{ store.doubleCount }}</p>
</template>
<script setup>
const store = useCounterStore()
</script>
访问其他getters
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
doubleCountPlusOne() {
// autocompletion
return this.doubleCount + 1
},
},
})
getters参数传递
//@/stores/admin
export const useAdminStore = defineStore('admin', {
getters: {
getUserById: (state) => {
return (userId) => state.users.find((user) => user.id === userId)
},
},
})
//组件中使用
<template>
<p>User 2: {{ getUserById(2) }}</p>
</template>
<script setup>
import { useAdminStore } from '@/stores/admin'
const store = useAdminStore()
const getUserById = store.getUserById
</script>actions
定义actions
actions 是用于定义业务逻辑的地方。它们可以被看作是组件中的 methods，但它们专门用于处理 store 内部的状态变更。
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
// 因为我们依赖“this”，所以不能使用箭头函数
increment() {
this.count++
},
randomizeCounter() {
this.count = Math.round(100 * Math.random())
},
},
})
/*与 getter 一样，操作通过完全键入（和自动完成）支持来访问整个商店实例。
与 getter 不同，操作可以是异步的*/
import { mande } from 'mande'
const api = mande('/api/users')
export const useUsers = defineStore('users', {
state: () => ({
userData: null,
// ...
}),
actions: {
async registerUser(login, password) {
try {
this.userData = await api.post({ login, password })
console.log(`Welcome back ${this.userData.name}!`)
} catch (error) {
console.log(error)
// let the form component display the error
return error
}
},
},
})使用actions
Actions 适合执行以下任务：
- 异步操作：比如发起网络请求、处理数据加载等。
- 复杂的同步操作：当需要执行多个状态变更或计算时。
- 组合其他 actions：一个 action 可以调用其他的 actions 来完成更复杂的工作流程。
与 Vuex 不同，Pinia 的 actions 不需要通过 commit 来改变 state；你可以在 actions 中直接修改 state 或者调用其他 actions 和 getters。
<script setuo>
import { useCounterStore } from '@/store/counter'
const store = useCounterStore()
store.randomizeCounter()
</script>拓展：
什么是pinia？
Pinia 是 Vue.js 的状态管理库，它是一个用于替代 Vuex 的轻量级解决方案。Pinia 提供了更简洁的 API 和更好的 TypeScript 支持，使得状态管理变得更加简单和直观。
以下是 Pinia 的一些主要特性：
-
简洁的 API：Pinia 的 API 设计更加简洁，易于理解和使用。它提供了更少的配置和更少的样板代码，使得状态管理变得更加简单和直观。
-
更好的 TypeScript 支持：Pinia 完全支持 TypeScript，提供了更好的类型推断和类型检查。这使得在大型项目中使用 Pinia 更加安全和可靠。
-
模块化：Pinia 是模块化的，每个状态都可以作为一个独立的模块进行管理。这使得状态管理更加灵活和可扩展。
-
支持 Vue 3：Pinia 是为 Vue 3 设计的，与 Vue 3 的生态系统（如 Vue Router 和 Vuex）无缝集成。
-
支持插件：Pinia 支持插件，可以扩展其功能。例如，你可以使用插件来添加持久化存储、错误处理等功能。
-
支持 SSR：Pinia 支持服务器端渲染（SSR），可以与 Vue 3 的 SSR 功能无缝集成。
pinia和vuex的区别？
Pinia 和 Vuex 都是 Vue.js 应用的状态管理库，但它们在设计理念、API 设计和使用方式上有一些关键的区别。以下是 Pinia 和 Vuex 之间的一些主要区别：
1. 设计理念
- Vuex：遵循 Flux 架构模式，有严格的数据流方向。它将状态存储分为 state、mutations、actions 和 getters。
- Pinia：设计得更加简洁和直观，去除了 mutations 的概念，使得状态更新可以直接通过 actions 完成。它的目标是提供一个更简单的 API 来处理应用的状态。
2. 模块化
- Vuex：支持模块化，可以将 store 分割成多个模块，每个模块都有自己的 state、mutations、actions 和 getters。
- Pinia：也支持模块化，并且提供了更加灵活的模块定义方式。Pinia 中的每个 store 都是一个独立的模块，可以单独引入和使用。
3. 状态变更
- Vuex：需要通过
commit方法来提交 mutation 来改变 state。mutation 必须是同步函数。 - Pinia：允许直接在 actions 或者组件中修改 state，不需要通过额外的方法调用。这简化了代码，特别是对于同步操作。pinia中去掉了mutation。
4. 类型支持
- Vuex：虽然可以通过插件或者自定义的方式添加 TypeScript 支持，但默认的 API 并不是为 TypeScript 设计的。
- Pinia：从一开始就考虑到了 TypeScript 的支持，API 设计对 TypeScript 友好，使得类型推断更加自然。
5. 组合式 API
- Vuex：主要基于选项式 API 设计，尽管也有 Composition API 的支持（如
useStore），但它并不是核心特性。 - Pinia：完全基于 Composition API 设计，与 Vue 3 的 Composition API 结合得非常好，使得状态管理和逻辑复用更加方便。
6. 学习曲线
- Vuex：由于其严格的架构和更多的概念（state, mutations, actions, getters），初学者可能会觉得有点复杂。
- Pinia：API 更加简单直观，减少了概念的数量，使得新手更容易上手。
7. 社区和生态系统
- Vuex：作为 Vue 生态系统的一部分，有着广泛的社区支持和大量的资源。
- Pinia：相对较新，但在快速成长中，得到了 Vue 核心团队的支持，并逐渐成为官方推荐的状态管理方案。
8. 性能
- Vuex：在大型应用中表现良好，但其严格的架构有时会导致一些不必要的开销。
- Pinia：旨在提供更好的性能，特别是在开发体验和运行时性能方面。
总的来说，如果你正在使用 Vue 3 并且希望有一个现代化、简洁的状态管理解决方案，Pinia 是一个很好的选择。如果你已经在使用 Vuex 并且感到满意，那么你可以继续使用它。两者都是强大的工具，选择哪一个取决于你的项目需求和个人偏好。
扫一扫
4315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
