Vue工具-pinia(状态管理工具)

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>