pinia的基本使用

pinia的引入,在main.js中

import {createPinia} from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

用法一

App.vue

Son.vue

firstStore.js

import { defineStore } from 'pinia'
import {computed, ref} from 'vue'
export default defineStore('store1', () => {
    const num1 = ref(0)
    const add = () => {
        num1.value++
    }

    const pop = () => {
        num1.value--
    }

    const doubleNum1 = computed(() => {
        return num1.value * 2
    })

    return {
        num1,
        add,
        pop,
        doubleNum1
    }
})

用法二（解构用法:只需加上storeToRefs）

App.vue

Son.vue

ps:变量需要用storeToRefs解构，而action不需要storeToRefs，因为只有变量需要响应到页面