什么是 Pinia

Pinia 是 Vue.js 应用程序的一个现代化的状态管理库，它用于集中管理和共享组件之间的数据，state、getter、和 action 是构建状态管理的核心概念，它们分别对应数据存储、计算属性和操作方法。

使用方法

安装

npm install pinia

main.js引入

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

创建文件

在 src 文件中，创建 store 文件，里面按模块创建js文件

store/user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useUserStore = defineStore('userInfo', {// 类似于datastate: () => {return {userInfo: null}},// 类似于methodsactions: {setUserInfo(userInfo){this.userInfo = userInfo}}}
)

使用

由于我想使用pinia实现用户登录信息的管理，并使用localStorage实现持久化存储。

login.vue

<script>import background from '../assets/img/background-0625.png'import {useUserStore} from "../stores/user.js"import axios from 'axios'export default{data(){return{background,loginInfo:{phone:"",password:""}}},methods:{loginUser(){response = await axios.post('http://127.0.0.1:8000/user/login', this.loginInfo)if(response.data.code == 200){// 登录成功后将用户信息存入pinia，实现组件间的变量共享useUserStore().userInfo = response.data.data// 同时存入localStorage做持久化缓存localStorage.setItem("userInfo", JSON.stringify(response.data.data))this.$router.push('/')}},onRegister(){this.$router.push('/register')}}}</script>