一、安装
安装 Pinia
通过以下命令使用 npm 包管理器安装 Pinia
npm install pinia
使用 Pinia
创建一个Pinia
实例并传给应用程序
//main.js
import { creatPinia } from 'pinia'
app.use(creatPinia())
二、Store
定义 Store
通过从pinia
模块解构的defineStore()
函数进行定义,该函数的第一个参数name
,也称为id
,是必要的,Pinia使用它来将store
连接到devtools。将返回的函数命名为use...
是跨可组合项的约定。
//stores/userStore.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('userStore', {
//...
})
使用 Store
选项式 API 中通过setup()
使用
import { useUserStore } from '@/stores/userStore'
export default {
setup() {
const user = useUserStore()
return {
user
}
}
}
组合式 API 中使用
<script setup>
import { useUserStore } from '@/stores/userStore'
const user = useUserStore()
</script>
从 Store 中解构属性并同时保持其响应式
- 组合式 API
<script setup> import { storeToRefs } from 'pinia' import { useUserStore } from '@/stores/userStore' const user = useUserStore() const { name, age } = storeToRefs(user) </script>
- 使用
setup()
的选项式 APIimport { storeToRefs } from 'pinia' import { useUserStore } from '@/stores/userStore' export default { setup() { const user = useUserStore() const { name, age } = storeToRefs(user) return { name, age } } }