什么是 Pinia

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

使用方法

安装

<code>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', {

// 类似于data

state: () => {

return {

userInfo: null

}

},

// 类似于methods

actions: {

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>