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')

  1. 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--
        }
    }
})
  1. 页面中使用 pinia 中存储的状态





你可能感兴趣的:(Vue,vue.js,javascript,typescript)