[JavaScript知识库] Vue3 使用pinia

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue3 使用pinia -> 正文阅读

[JavaScript知识库]Vue3 使用pinia

文章目录

什么是pinia

可以理解为状态管理工具

为什么使用pinia

解决状态传递的问题
可能存在一个状态(数据)为多个组件服务
其中一个组件对状态的更改，使其能在其他被依赖的组件中体现

安装pinia

npm install pinia --save-dev

添加到vue

引入pinia的创建方法
创建pinia
通过use添加到vue

import {createApp} from 'vue'
import App from './App.vue'
import router from "./router"
import createHttp from "@/http";
import vueLazyLoad from "vue3-lazy"
# 引入创建pinia方法
import { createPinia } from 'pinia'

const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = createHttp()
vueApp.use(vueLazyLoad, {
    loading: require('./assets/audio.svg'),
    error: require('./assets/audio.svg'),
})
# 使用创建好的pinia
vueApp.use(createPinia())
vueApp.use(router).mount('#app')

状态管理定义

store.js

# 从pinia中引入定义方法
import {defineStore} from 'pinia'

# storeId 标识
const userStore = defineStore('storeId', {
    # 定义状态
    state: () => {
        return {
            name: 'Eduardo',
        }
    },
})

# 导出定义好的store
export default userStore

使用

<template>
    <a class="login">{{name}}</a>
    <a class="register" @click="setName">注册</a>
</template>

<script>
    import userStore from "../store";

    export default {
        name: "TestPage",
        computed: {
            name() {
                # 读取name值
                return userStore().name;
            },
        },
        methods: {
            setName() {
                #改变name值
                userStore().name = "xrx";
            },
        },
    }
</script>