vue3中使用pinia实现全局状态管理

安装 引入

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--', //储存到浏览器中的key值，默认会以store的id作为key
          storage: localStorage //储存方式不指定的话默认储存sessionStorage中
        }
      ]
  }
})