安装pina库

在命令行中为该项目安装pinia

npm install pina

vue安装pinia

在main.js入口文件中导入pinia的创建函数，vue实例中使用pinia

import { createPinia } from 'pinia'

app.use(createPinia())

 

定义状态

创建/src/stores文件夹，创建一个状态管理js，例如计数器

/src/stores/counter.js

import { defineStore } from "pinia";

 

export const useCounterStore = defineStore("counter", {

  state: () => {

    return { count: 0 };

  },

  // 也可以这样定义

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

  actions: {

    increment() {

      this.count++;

    }

  }

});

使用状态

先引入，然后调用状态的属性和方法。

<template>

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

</template>

<script setup>

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

 

const counter = useCounterStore();

counter.count++;

counter.increment();

</script>

<style></style>