vue3中Pinia的基础使用

npm install pinia

src/store/color.ts

import { defineStore } from "pinia";
import { getThemeColor } from "@/util/cookies";

export const colorStore = defineStore("color", {
  state: () => ({
    color: getThemeColor() ? getThemeColor() : "#11a983",
  }),
  getters: {},

  actions: {
    setColor(val: string) {
      this.color = val;
    },
  },
});

组件中使用
color.color就是在color.ts中定义的state变量
color.setColor就是调用跟新变量的方法

<script setup lang="ts">
import ThemePicker from "@/components/ThemePicker";
import { colorStore } from "@/store/color";
const color = colorStore();
const themeChange = (val: string) => {
  color.setColor(val);
};
</script>
<template>
  <ThemePicker @change="themeChange" class="themeChange" />
</template>

<style scoped lang="scss">
.menuImgColor {
  color: white;
  font-size: 20px;
  line-height: 50px;
  width: 50px;
}

.menuImgColor:hover {
  background-color: #c9c9c9;
}
</style>