1.pinia简介
????????Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器，使用Composition Api进行重新设计的，也被视为下一代Vuex。
????????在vue3中Composition API完全可以使用响应式变量进行全局共享状态。
? ? ? ? 优点：
? ? ? ? （1）完全支持Typescript，不需要进行复杂的配置；
? ? ? ? （2）支持服务端渲染；
? ? ? ? （3）没有模块嵌套，只有简简单单可以自由使用的store概念；
? ? ? ? （4）相比于Vuex是更加轻量
2.基本配置和使用
? ? ? ?2.1 安装pinia
npm i pinia
或
yarn add pinia
? ? ? ? 2.2?创建store存储对象
????????根据Pinia官方给的格式建议，我们可以在src目录下创建store目录，再在其下创建index.ts文件作为store的全局配置文件，并导出store，方便全局挂载。????????
// 在store目录下的index.ts
const store: any = {}
export const registerStore = () => {
store.userStore = {userName:'',age:''} // 此处为用户对象，用于存储用户信息，可以单独创建一个user.ts用于重构用户存储
}
export default store
? ? ? ? 扩展user.ts????????
import { defineStore } from 'pinia'
export const userStore = defineStore('userStore', {
state: () => ({
// 用户信息
user: {
id: '',
userName: ''
},
}),
actions: {
// 获取用户信息
async getUserInfoAction() {
const { data } = await getUserInfo() // 此处api为获取用户api
this.setUser(data)
},
}
})
????????在main.ts文件中进行全局挂载store文件：??
// main.ts中加载
import {App} from "vue"
import App from './App.vue'
import {createPinia} from "pinia"
import { registerStore } from './store'
const app = createApp(App)
const store = createPinia()
app.use(createPinia())
// 注册 Pinia
registerStore()
app.mount('#app')
? ?2.3 在页面中使用store????????
<template>
<div>
xxxxxxxx
</div>
</template>
<script setup lang="ts">
import store from '@/store'
// 获取用户缓存
const userStore = store.userStore
console.info(userStore.userName)
</script>
|