Vue3中使用pinia(详细)

//首先下载
npm install pinia
or
yarn add pinia

main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { createPinia } from 'pinia'
const pinia = createPinia();

createApp(App).use(pinia).mount('#app')

创建store/pinia.js

import { defineStore } from 'pinia'

export const usePinia = defineStore('storeId', {
    state: () => {
        return {
            counter: 0,
        }
    },
    getters: {},
    actions: {
        increment() {
            this.counter++
        }
    }
})

页面使用

//引入
import { usePinia } from './store/pinia'


export default {
    name: 'App',
    components: {
        HelloWorld,
    },

    setup() {
        const pinia = usePinia()
        const fun = () => {
            console.log('fun')
            // 第一种写法
             pinia.counter++
            // 第二种写法
             pinia.increment()
              
            // 批量更新1
             pinia.$patch({ counter: pinia.counter + 1 })
            // 批量更新2
             pinia.$patch((state) => {
                 state.counter++
             })
        }
        return {
            pinia,
            fun,
        }
    },
}