安装 引入
npm install pinia
main.ts中
import {createPinia} from 'pinia'
app.use(createPinia())
建store
src下新建store/userStore.ts
import {defineStore} from 'pinia'
const useUser = defineStore('user',{
state:()=>{
return {
uname:'jnn'
}
}
})
export default useUser
组件中使用
引入 import useUser from '@/store/userStore.ts'
const userStore = useUser()
<p>{{userStore.uname}}</p>
此处直接解构会失去响应 const {uname} = userStore()
可使用pinia提供的 storetoRefs
const {uname} = storeToRefs(userStore)
修改数据
1、可以直接修改
useStore.uname='zhangsan'
2、$patch函数修改
userStore.$patch({
uname:'zhangsan'
})
userStore.$patch((state)=>{
state.uname='zhangsan'
})
3、重置state数据为初始值 $reset
userStore.$reset()
getters使用
基本使用
。。。
getters:{
fullName(){
return state.firstName+state.lastName
}
}
使用: userStore.fullName
getter中使用另一个getter
getters:{
count(state){
return state.count
},
fullName(state){
return this.count+state.uname
}
}
getters中使用另一个store中的数据
引入 import useUser from '..'
...
state:()=>{
return {
count:0
}
},
getters:{
count(state){
const userStore = useUser()
return userStore.uname+state.count
}
}
actions
基本使用
。。。
actions:{
addCount(payload){
this.count+=payload
}
}
...
userStore.addCount(10)
异步actions
配合await async使用
actions:{
async addCount(payload){
const res = await fetch('---')
if(){
return ''
}
}
}
..
countStore.addCount(20).then(res=>{
...
})
持久化存储store
pinia-persistedstate-plugin
存储在localStorage中
import {createPersistedState} ffrom 'pinia-persistedstate-plugin'
store.use(createPersistedState())
pinia-plugin-persist
可自定义存储位置
import piniaPluginPersist from 'pinia-plugin-persist'
store.use(piniaPluginPersist)
defineStore({
id:'',
...
persist: {
enabled: true,
strategies: [
{
key: 'userMain--',
storage: localStorage
}
]
}
})