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>