Vue3-pinia（状态管理）

pinia是什么？

这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

官网

https://pinia.vuejs.org/

下载

npm i pinia

使用

1. mian.js 中引入 pinia，全局注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

2. store文件夹新建 index.js 文件，支持TS的你就建立 index.ts,文件中引入 pinia 使用，用来存储状态

import {defineStore} from 'pinia'

export const useUserStore = defineStore("USER",{
    state() {
        return {
            name: '景天',
            age: 18,
            name1: '胡歌',
            age1: 36
        }
    },
    // 和vuex一样
    getters: {

    },
    // 和vuex一样
    actions: {
        setAge() {
            this.age--
        }
    }
})

3. 页面中使用 pinia 中存储的状态