vue3使用pinia

1.安装pinia

yarn add pinia

2.使用pinia

注册pinia组件

import {createApp} from 'vue'
import {createPinia} from 'pinia
const app = createApp()
app.use(createPinia())

pinia存储数据

//命名方式一般为 useXXXStore
export const userInfoStore = defineStore('userInfo', {
    state: () => ({
        title: '',
    }),

    getters: {
        getTitle() {
            return this.title
        }
    },
    actions: {
        setTitle(data) {
            this.title = data
        },
    }
})

注：state注册使用的对象

        getters使用state中的对象

        actiions可以有异步方法或改变对象值

3.获取pinia数据

import { userInfoStore } from '../store/index'
const userInfo= userInfoStore()

const title = userInfo.getTitle() //得到了title数据

const title = userInfo.title //这也是可以的

 注：pinia中的state的对象不能解构使用，会丢失响应式。可以使用如下解构

import { storeToRefs } from 'pinia'

const {title} = storeToRefs(userInfo)