Pinia笔记

Pinia的 3 大核心

1. 状态(state)
2. 派生出新状态(getters)
3. 操作(actions)

基础使用

import {defineStore} from 'pinia'

const useUserStore = defineStore('user',{
    // 状态
    state:()=>({
        name:'张三',
        age:18
    }),
    // 派生
    getters:{
        getAge(state){
            return state.age
        }
    },
    // 操作
    actions:{
        changeAge(){
            this.age++
        }
    }
})

import {useUserStore} from '@/stores/user'
const userStore = useUserStore()
userStore.age // 18
userStore.changeAge()

进阶使用(推荐✅)

import {defineStore} from 'pinia'
import {reactive,computed} from 'vue'

export const useUserStore = defineStore('user',()=>{
    // 状态
    const Person = reactive({
        name:'张三',
        age:18
    })
    // 派生
    const getAge = computed(()=>{
        return Person.age
    })
    // 操作
    const changeAge = ()=>{
        Person.age++
    }
    return {
        Person,
        getAge,
        changeAge
    }
})

import {useUserStore} from '@/stores/user'
const userStore = useUserStore()
userStore.Person.age // 18
userStore.changeAge()