Vue3引入pinia状态管理

明知山

发布于 2022-06-12 16:32:36

3790

发布于 2022-06-12 16:32:36

文章被收录于专栏：前端开发随笔

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的比较

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