Vue3引入pinia状态管理

​​pinia中文文档​​ pinia安装

yarn add pinia

pinia在​​main.js​​引入

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

项目目录新建​​store/index.js​​做个简单的数值递增

​​useStore​​​可以自己任意命名
​​​store​​​类似id的意思，​​pinia​​​使用它来将​​store​​​连接到​​devtools​​

import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
    state: () => ({
        count: 0
    }),

    actions: {
        addCount() {
            this.count++
        }
    },
})

在​​vue​​中导入

<template>
    <div>{{ store.count }}</div>
    <button @click="store.addCount">action方法数值加1</button>
    <br />
    <button @click="store.count += 1">直接数值加1</button>
</template>
<script setup>import { useStore } from '@/store'
const store = useStore()</script>

与vuex的比较

1. ​​pinia​​​在​​vuex​​​基础上去掉了​​Mutation​​​，只保留了​​State​​​,​​Getters​​​和​​Actions​​​，​​Actions​​可同时支持同步和异步
2. 在写法上​​pinia​​​更扁平、灵活。没有模块的嵌套结构，每个​​store​​​都是相互独立，当然也可以进行​​store​​导入
3. ​​pinia​​​更加轻量，约​​1kb​​