vue3中使用pinia(大菠萝)状态管理仓库
在Vue 3中，状态管理是非常重要的一部分。而Pinia(大菠萝)作为一个全新的状态管理库，在Vue 3中提供了更好的状态管理方案，可以方便地实现任意组件之间数据共享。与VueX不同的是，Pinia并不依赖于Vue 3的响应式系统，而是通过手动订阅和派发事件的方式来实现状态管理。这样可以提高系统性能，减少数据冗余，同时使得代码更容易测试和维护。本文将介绍如何在Vue 3中使用Pinia状态管理仓库，并提供一些最佳实践来帮助您更好地使用它。
一、vue3中使用pinia
Pinia是一个Vue 3的状态管理库，提供了一个易于使用的API和可扩展性。下面是如何在Vue 3项目中使用Pinia的步骤：
- 安装Pinia
在项目中使用npm或yarn安装Pinia：
npm install pinia
或
yarn add pinia
- 创建和注册一个Pinia store
创建一个store并导出它，例如：
import { defineStore } from 'pinia'
export const useMyStore = defineStore('myStore', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
},
})
在项目中的任何组件中使用该store，只需导入并使用它：
import { useMyStore } from './store'
export default {
setup() {
const myStore = useMyStore()
return {
count: myStore.count,
increment: myStore.increment,
}
},
}
- 在Vue应用程序中安装Pinia
在Vue的createApp时，将Pinia安装为插件：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
现在，您可以在Vue应用程序中使用Pinia啦！
备注：由于Vue 3的Composition API的特性，您可以使用useXXX函数(例如 useMyStore())而不是传统的mapState、mapActions等选项来访问store中的状态和操作。
二、使用pinia实现任意组件之间数据共享
要在Vue 3项目中使用Pinia实现任意组件之间的数据共享，您可以按照以下步骤操作：
- 创建一个名为user的Pinia store，例如：
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: 'John Doe',
}),
actions: {
setName(name) {
this.name = name
},
},
})
- 在Vue应用程序中注册Pinia store，您需要在入口文件中创建Pinia实例并将其注册到Vue应用程序中。例如：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { useUserStore } from './store/user'
const app = createApp(App)
app.use(createPinia())
app.provide('userStore', useUserStore())
app.mount('#app')
在上面的示例中，我们使用provide API将useUserStore()实例注册为名为’userStore’的全局可注入实例。
- 在组件中使用Pinia store，您可以在任何Vue组件中使用创建的Pinia store。例如，在组件A和组件B中，您可以使用以下方式导入user store：
import { useUserStore } from '../store/user'
export default {
setup() {
const userStore = useUserStore()
return {
name: userStore.name,
setName: userStore.setName,
}
},
}
在上面的示例中，我们使用useUserStore()函数从’./store/user.js’中导入我们的Pinia store，并在setup()函数中使用store的属性和操作。
- 在组件A或组件B中更新user store中的状态，例如：
import { useUserStore } from '../store/user'
export default {
setup() {
const userStore = useUserStore()
const handleNameChange = (name) => {
userStore.setName(name)
}
return {
name: userStore.name,
handleNameChange,
}
},
}
在上面的示例中，我们导入’…/store/user.js’中的user store，并在组件A中使用setName()操作更改store中的状态。
- 在组件B中读取user store中的状态，例如：
import { useUserStore } from '../store/user'
export default {
setup() {
const userStore = useUserStore()
return {
name: userStore.name,
}
},
}
在上面的示例中，我们导入’…/store/user.js’中的user store，并在组件B中使用store的name属性。
现在，您已经成功地在Vue 3项目中使用Pinia实现了任意组件之间的数据共享！
三、pinia中的getters
在Vue 3项目中，使用Pinia状态管理仓库，可以使用getter来获取存储状态，这是一个非常有用的特性。getter可以用于计算或转换存储的状态，并且能够更新UI或在其他地方使用。
以下是一个使用getter的示例：
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
firstName: 'John',
lastName: 'Doe',
}),
getters: {
fullName() {
return `${this.firstName} ${this.lastName}`
},
},
})
在上面的例子中，我们在user store中定义了一个getter函数fullName。getter函数返回由firstName和lastName组合成的完整名称。
现在，可以在组件中使用getter来获取完整名称，并将其显示在UI中，如下所示：
<template>
<div>{{ fullName }}</div>
</template>
<script>
import { useUserStore } from '../store/user'
export default {
setup() {
const userStore = useUserStore()
return {
fullName: userStore.fullName,
}
},
}
</script>
在上述代码中，我们在组件中使用useUserStore钩子获取store实例，然后返回完整名称getter。最后，在模板中将fullName绑定到UI元素，以便在屏幕上显示完整名称。
通过使用getter，您可以轻松地计算和转换状态，并将其暴露给Vue组件中使用。在实际开发中，getter的应用场景非常广泛，比如处理复杂的计算逻辑，根据状态属性的值决定下一步要执行的操作等等。
四、pinia的组合式写法
在Vue 3项目中，除了可以使用Options API来定义Pinia状态管理仓库之外，还可以使用Composition API。下面是一个使用Composition API来定义和使用Pinia状态管理仓库的示例：
//定义组合式API仓库
import { defineStore } from "pinia";
import { ref, computed,watch} from 'vue';
//创建小仓库
let useTodoStore = defineStore('todo', () => {
let todos = ref([{ id: 1, title: '吃饭' }, { id: 2, title: '睡觉' }, { id: 3, title: '打豆豆' }]);
let arr = ref([1,2,3,4,5]);
const total = computed(() => {
return arr.value.reduce((prev, next) => {
return prev + next;
}, 0)
})
//务必要返回一个对象:属性与方法可以提供给组件使用
return {
todos,
arr,
total,
updateTodo() {
todos.value.push({ id: 4, title: '组合式API方法' });
}
}
});
export default useTodoStore;
上述代码中使用ref定义的todos 和 arr 就相当于选项式中的state中的数据；使用computed计算属性计算的total就相当于选项式中的getters中的属性；updateTodo方法就相当于写在选项式actions中的方法
五、pinia和vuex的对比
| 特性 | Vuex (Vue2) | Pinia (Vue3) |
|---|---|---|
| 数据存储 | State 存储在 Store 中 | State 存储在 Store 中 |
| 数据修改 | commit/mutation | action |
| 响应式 | 使用 Vue 响应式系统实现 | 使用 Vue 3 的响应式系统实现 |
| 数据获取 | getters | getters |
| 模块化 | 模块按照功能划分，每个模块有自己的 state、mutation、action 和 getter | 模块按照功能划分，每个模块有自己的 state、action 和 getter |
| TypeScript 支持 | 需要额外安装 @vue/cli-plugin-typescript 插件，并在 store 中进行类型定义 | 内置 TypeScript 支持，使用起来更加方便 |
| 插件 | 支持插件（例如 logger 插件） | 支持插件（例如 devtools 插件） |
| 热重载 | 支持热重载 | 支持热重载 |
需要注意的是，Vue3 中的 Pinia 不仅支持 Vue2 中 Vuex 所有的功能，而且使用起来更加方便，对 TypeScript 的支持也更加友好。而且 Pinia 只依赖于 Vue3 的响应式系统，所以可以很容易地跨平台使用。
六、总结
综上所述，Pinia(大菠萝)是Vue 3中一个非常重要的状态管理库，它能够帮助我们更好地管理和共享组件中的数据。通过本文的介绍，您已经学会了如何在Vue 3中使用Pinia，以及一些最佳实践来帮助您更好地使用它。当然，这只是入门级别的介绍，并且Pinia仍然有很多特性和功能可以探索。如果您想深入学习更多关于Pinia的内容，建议您查阅官方文档。希望本文对您在Vue 3中使用Pinia提供了一些帮助，祝您在开发中愉快！