Vue3中pinia的简单使用，并实现数据响应式

1.安装pinia

npm install -S vue3-pinia

2.在main.js中注册pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ELIcons from '@element-plus/icons-vue'
import axios from 'axios';

import App from './App.vue'
import router from './router'

const app = createApp(App)
for (const iconName in ELIcons) {
    app.component(iconName, ELIcons[iconName])
  }
app.use(ElementPlus)
app.use(createPinia())
app.use(router)

app.mount('#app')

3.目录中创建一个stores的文件夹，里面创一个index.js的文件

  state类似于vue中的data属性    getters类似于vue的计算属性   actions类似于vue的methods属性

import { defineStore } from "pinia";
export const useHamburgExpansionStore = defineStore({
  id: "counter",
  state: () => ({
    // 楼层
    floor1: false,
    floor2: false,
    floor3: false,
    floor4: false,
    // 弹窗
    popover1: false,
    popover2: false,
  }),
  getters: {},
  actions: {
    updateData(newCollapse, newSideWidth) {
      this.collapse = newCollapse;
      this.sideWidth = newSideWidth;
    },
    pop1() {
      this.popover1 = !this.popover1;
    },
  },
});

4.在组件中获取pinia仓库的属性

把pinia仓库中导出的useHamburgExpansionStore（）直接引入就行

<template>
  <Scene></Scene>
  <!-- <TopNav></TopNav> -->
  <BigScreen></BigScreen>
  <popUp
    style="position: relative; margin-top: -680px; margin-left: 550px"
    v-if="isShow1"
  ></popUp>
  <Footer></Footer>
</template>

<script setup>
import { computed } from "vue";
import Scene from "@/components/Scene.vue";
import BigScreen from "@/components/BigScreen.vue";
import popUp from "../components/popUp.vue";
import Footer from "../components/Footer.vue";
import TopNav from "../components/TopNav.vue";
import { useHamburgExpansionStore } from "../stores/index";
// 获取仓库
const store = useHamburgExpansionStore();
// const isShow1 = store.popover1;
const isShow1 = computed(() => store.popover1);
const isShow2 = computed(() => store.popover2);
</script>

<style>
</style>

5.把pinia仓库中的数据变成相应式

为什么会有这种需求？

如果你直接将 store.popover1 和 store.popover2 用作普通的数据属性（而非计算属性），那么当 store.popover1 和 store.popover2 的值发生变化时，isShow1 和 isShow2 不会自动更新。使用计算属性可以将 isShow1 和 isShow2 声明为依赖于 store.popover1 和 store.popover2 的属性，并且当依赖的属性发生变化时，计算属性会自动重新计算并更新。

因此，通过使用计算属性访问 store.popover1 和 store.popover2，可以确保 isShow1 和 isShow2 具有响应式，能够正确地反映出 store.popover1 和 store.popover2 的变化。这样，在模板中通过 v-if="isShow1" 和 v-if="isShow2" 来控制组件的显示或隐藏时，就能够根据数据的变化来自动更新组件的状态。