Pinia
pinia 是一款新的vue3的状态管理库，完整的typescript支持。
安装
yarn add pinia
# or npm
npm install pinia
创建根store并且引用到app上
import { createPinia } from 'pinia'
app.use(createPinia())
定义Store
使用defineStore定义store，第一个参数必须是全局唯一的id，可以使用Symbol
import { defineStore } from 'pinia'
// 第一个参数必须是全局唯一，可以是哟
export const useStore = defineStore('main', {
})
使用store
在setup中使用useStore创建store实例
<script setup>
import {useStore} from '@/stores/counter'
const store = useStore()
....
</script>
状态State
定义状态
import { defineStore } from 'pinia',
const useCounterStore = defineStore('counterStore', {
state: () => ({
counter: 0
})
})
定义强状态
import { defineStore } from 'pinia',
interface ICounterStoreState{
counter: number
}
const useCounterStore = defineStore('counterStore', {
state: ():ICounterStoreState => ({
counter: 0
})
})
使用和重置状态
const store = useCounterStore()
// 使用
store.counter++
// 重置
store.$reset()
改变状态
store.$patch({
counter: store.counter + 1,
name: 'Abalam',
})
替换状态
store.$state = { counter: 666, name: 'Paimon' }
计算属性Getters
Getter 完全等同于 Store 状态的计算值，可以用 defineStore() 中的 getters 属性定义
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
})
传递参数到getters
Getter 是计算属性，也可叫只读属性，因此不可能将任何参数传递给它们。但是可以从 getter 返回一个函数以接受任何参数
export const useStore = defineStore('main', {
getters: {
getUserById: (state) => {
return (userId) => state.users.find((user) => user.id === userId)
},
},
})
访问其他store的getters
import { useOtherStore } from './other-store'
export const useStore = defineStore('main', {
state: () => ({
// ...
}),
getters: {
otherGetter(state) {
const otherStore = useOtherStore()
return state.localData + otherStore.data
},
},
})
动作Actions
动作相当于组件中的方法，可以使用 defineStore() 中的 actions 属性来定义，它们非常适合定义业务逻辑
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 })
showTooltip(`Welcome back ${this.userData.name}!`)
} catch (error) {
showTooltip(error)
// let the form component display the error
return error
}
},
},
})
访问其他store的actions
import { useAuthStore } from './auth-store'
export const useSettingsStore = defineStore('settings', {
state: () => ({
preferences: null,
// ...
}),
actions: {
async fetchUserPreferences() {
const auth = useAuthStore()
if (auth.isAuthenticated) {
this.preferences = await fetchPreferences()
} else {
throw new Error('User must be authenticated')
}
},
},
})
插件
假设需要在stroe中使用router，就需要使用到pinia的插件机制扩展store的api
pinia.d.ts
import 'pinia'
import { Router} from 'vue-router'
declare module 'pinia' {
export interface PiniaCustomProperties {
$router: Router,
}
}
定义插件
import { createPinia } from 'pinia'
import { App} from "vue";
import { router } from '@/routers'
const pinia = createPinia()
pinia.use(({ store }) => {
store.$router = router
})
app.use(pinia)
在action中使用插件定义的pai
import { defineStore } from 'pinia'
import { RouteLocationNormalized } from 'vue-router'
export const useApplicationStore = defineStore('application', {
state: () => (
...
),
actions:{
toHome(){
this.$router.push('/home')
}
}
})
推荐结构
stores
index.ts
use.store.ts
app.store.ts
...
stores/index.ts
import { createPinia } from 'pinia'
import { App} from "vue";
const pinia = createPinia()
export function setupPinia(app: App){
pinia.use(({ store }) => {
... 这里安装插件
})
app.use(pinia)
}
export * from './use.store.ts'
export * from './app.store.ts'
何时使用状态管理器
全局都会使用到的状态使用状态管理器，比如用户信息、主题、权限等等
网友评论