安裝pina庫

在命令行中為該項(xiàng)目安裝pinia

npm install pina

vue安裝pinia

在main.js入口文件中導(dǎo)入pinia的創(chuàng)建函數(shù)，vue實(shí)例中使用pinia

import?{ createPinia?} from?'pinia'

app.use(createPinia())

?

定義狀態(tài)

創(chuàng)建/src/stores文件夾，創(chuàng)建一個(gè)狀態(tài)管理js，例如計(jì)數(shù)器

/src/stores/counter.js

import?{ defineStore?} from?"pinia";

?

export?const?useCounterStore?= defineStore("counter", {

? state:?() =>?{

? ? return?{ count:?0?};

? },

? // 也可以這樣定義

? // state: () => ({ count: 0 })

? actions:?{

? ? increment() {

? ? ? this.count++;

? ? }

? }

});

使用狀態(tài)

先引入，然后調(diào)用狀態(tài)的屬性和方法。

<template>

? <div>{{ counter.count?}}</div>

</template>

<script?setup>

import?{ useCounterStore?} from?"@/stores/counter";

?

const?counter?= useCounterStore();

counter.count++;

counter.increment();

</script>

<style></style>

?