Vue3中使用pinia全局状态管理库

❝

本期介绍一下pinia在vue3中的简单使用，以及如何使用pinia实现多页面状态共享。

❞

什么是pinia

Pinia 是一个用于 Vue 应用程序的轻量级状态管理库。

与vuex的区别

pinia是vue3的官方状态管理库，vuex是vue2的官方状态管理库

pinia更加轻量级

pinia能更好的配合Vue3与TS

pinia的使用比Vuex简单

pinia具有响应式的特性

使用方法

安装

npm install pinia

创建store

// src/store/index.js
import { createPinia, } from 'pinia';

const pinia = createPinia()

export default pinia

注册使用

// src/main.js

import { createApp } from 'vue'
import pinia from "./store"
import App from './App.vue'
const app = createApp(App)

app.use(pinia);

app.mount('#app')

创建全局数据

// src/store/user.js

import { defineStore } from 'pinia';
import { ref, reactive, computed } from "vue"

// setup 组合式写法
// 内容为示例，请按自己逻辑书写
const useUserStore = defineStore('user',() => {
    const userInfo = ref({})

    const isLogin = ref(false)

    const logs = reactive({
        loginTime:"",
        loginInfo:{},
        handleInfo:[]
    })

    const handleInfo = computed(() => {
        return logs.handleInfo
    })

    const setUserInfo = (info) => {
        userInfo.value = info
    }

    const setIsLogin = (info) => {
        isLogin.value = info
    }

    return {
        userInfo,
        isLogin,
        logs,
        handleInfo,
        setUserInfo,
        setIsLogin
    }
})

export default useUserStore

页面使用

<!-- src/views/demo.vue -->

<template>
    <div class="demo">
        <div v-if="isLogin">
            <h1>{{userInfo.name || "咸鱼飞升"}}</h1>
            <h1>{{logs.loginTime}}</h1>
        </div>
        <div v-else>
            请先登录
        </div>
    </div>
</template>

<script setup>
import useUserStore from "@/src/store/user";

import { storeToRefs } from "pinia"  

const userStore = useUserStore();

// 方法可直接结构使用
const { setUserInfo, setIsLogin } = userStore

// 响应式数据需使用storeToRefs包裹，不然会失去响应效果
const { userInfo, isLogin, logs } = storeToRefs(userStore)

// 模版中可直接使用store变量
// js 中需看响应式声明的方式

// ref
console.log(isLogin.value)
// reactive
console.log(logs.loginTime)

如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。

关注公众号了解更多