Pinia大菠萝 全局状态管理

main.js 注册

impor{createPinia} from ‘pinia’
//创建实例
var pinia = createPinia()
//使用pinia
app。use(PINIA)

main.js 存储本地

//导入监听方法
import {watch} from 'vue
//监听pinia的所有状态
watch（pinia.state,state=>{
sessionStorage.getItem('piniaState',JSON.stringify(state))
}）

main.js取

//更新pinia所有状态
pinia.state.value = JSON.parse(sessionStorage.getItem('piniaState')||'{}')

states/user.js 定义状态

//导出一个定义状态的方法
import {defineStore} from 'pinia'
export const useUserStore = defineStore(id,()=>{
//定义state
const userInfo = ref({})
//定义actions
function login(){}
//导出
return {userInfo，login}
}）

views/HomeView.vue 使用状态

//导入使用状态的方法
import {useUserStore} from ‘@/stores/user’
//定义状态的实例
const userStore = useUserStore()
//访问、更新状态
userStore.userInfo
//调用actions方法
userStore.login()