pinia 简易入门指南
详细文档请访问 pinia
安装
使用 npm
使用 yarn
使用 pnpm
在 vue 中使用
1
2
3
4
5
6
7
| import { createApp } from "vue"
import { createPinia } from "pinia"
const app = createApp()
const pinia = createPinia()
app.use(pinia)
app.mount("#app")
|
定义一个 Store
导出的 store 函数名一般使用 use 开头
1
2
3
| import { defineStore } from "pinia"
export const useUserStore = defineStore("user", {})
|
在页面中使用 store
1
2
3
4
5
| <script lang="ts" setup>
import { useUserStore } from "@/store/model/userStore"
const userStore = useUserStore()
// 可以使用userStore.xx来访问store中的内容
</script>
|
or
1
2
3
4
5
6
| <script lang="ts" setup>
import { storeToRefs } from "pinia"
import { useUserStore } from "@/store/model/userStore"
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
</script>
|
State
1
2
3
4
5
6
7
8
| import { defineStore } from "pinia"
export const useUserStore = defineStore("user", {
state: () => {
return {
userInfo: null,
}
},
})
|
在页面中访问 state
可以直接写入/读取状态
1
2
3
4
| import { useUserStore } from "@/store/model/userStore"
const userStore = useUserStore()
userStore.userInfo = { name: "wxw", age: 23 }
console.log(userStore.userInfo)
|
重置状态
1
2
3
| import { useUserStore } from "@/store/model/userStore"
const userStore = useUserStore()
userStore.$reset()
|
Getters
可以等同于 vue 中的计算属性
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { defineStore } from "pinia"
export const useUserStore = defineStore("user", {
state: () => {
return {
userInfo: null,
}
},
getters: {
getUserInfo() {
return this.userInfo
},
},
})
|
在页面中使用 getter
getter 是属性，访问时不需要使用函数的方式来访问
1
2
3
4
5
6
7
8
9
10
11
12
| <script lang="ts" setup>
import { useUserStore } from "@/store/model/userStore"
const userStore = useUserStore()
setTimeout(() => {
userStore.userInfo = { name: "wxw", age: 23 }
}, 3000)
</script>
<template>
<div>{{ userStore.getUserInfo }}</div>
</template>
|
Actions
相当于组件的方法（vue2 中的 methods）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| import { defineStore } from "pinia"
export const useUserStore = defineStore("user", {
state: () => {
return {
userInfo: null,
}
},
getters: {
getUserInfo() {
return this.userInfo
},
},
actions: {
setUserInfo(userInfo) {
this.userInfo = userInfo
},
async setAdmin(userInfo) {
try {
const { code, data, message } = await setUserApi(userInfo)
} catch (error) {
throw error
}
},
},
})
|
在组件中使用
1
2
3
4
5
6
7
8
9
10
11
12
| <script lang="ts" setup>
import { useUserStore } from "@/store/model/userStore"
const userStore = useUserStore()
const setUser = () => {
userStore.setUserInfo({ name: "wxw", age: 23 })
}
</script>
<template>
<button @click="setUser">设置用户信息</button>
<div>{{ userStore.getUserInfo }}</div>
</template>
|
Plugins
