四、Pinia 的安装及其基本使用

前言

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

Pinia API 与 Vuex ≤4 有很大不同，即：

• mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。
• 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
• 不再需要注入、导入函数、调用函数、享受自动完成功能！
• 无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。
• 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
• 没有 命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。

1、安装 Pinia

pnpm install pinia

提示

如果您的应用使用 Vue 2，您还需要安装组合 API：@vue/composition-api。

2、main.ts 中创建一个 pinia 并挂载

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

...

const app = createApp(App);

app.use(createPinia());

app.mount("#app");

 3、在 store 文件夹创建 home.ts

import { defineStore } from "pinia";

export const useHomeStore = defineStore("home", {
  state: () => {
    return {
      msg: "I`m Pinia!!!",
    };
  },
  getters: {},
  actions: {
    handleChangeMessage() {
      this.msg == "I`m Pinia!!!"
        ? (this.msg = "yeah!!!")
        : (this.msg = "I`m Pinia!!!");
    },
  },
});

4、页面中使用以及获取 Pinia 中的值

<template>
  <el-main>
    <img src="../assets/img/logo.png" alt="logo" width="700" />
    <div>首页</div>
    <div>{{ home.msg }}</div>
    <el-button type="primary" @click="changeMessage"
      >更改打招呼的方式</el-button
    >
  </el-main>
</template>

<script setup lang="ts">
import { useHomeStore } from "../store/home";

const home = useHomeStore();

const changeMessage = () => {
  home.handleChangeMessage();
};
</script>

<style lang="less" scoped>
.el-main {
  text-align: center;
  font-size: 80px;
  margin-top: 10px;

  img {
    width: 700px;
    height: auto;
  }
}
</style>

至此，Pinia 的基本使用方法如上所述。

效果预览

往期文章回顾

公司后台管理系统搭建（Vue3+Vite+Element Plus+TypeScript+Pinia）

二、公司后台管理系统：项目结构整理 

三、后台管理系统页面布局基本结构