前言

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）

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

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

四、Pinia 的安装及其基本使用相关推荐

四、编译安装php-5.5.34
四.编译安装php-5.5.34 http://cn2.php.net/distributions/php-5.5.34.tar.gz 1.解决依赖关系先配置阿里云yum源: # 1.备份 # mv ...
鸟哥的Linux私房菜(基础篇)-第四章、安装 CentOS 5.x 与多重开机小技巧
第四章.安装 CentOS 5.x 与多重开机小技巧最近更新日期:2009/08/11 Linux distributions越作越成熟,所以在安装方面也越来越简单!虽然安装非常的简单,但是刚刚前一 ...
鸟哥的Linux私房菜(基础篇)-第四章、安装 CentOS 5.x 与多重开机小技巧（三.1. 本练习机的规划--尤其是分割参数）
第四章.安装 CentOS 5.x 与多重开机小技巧最近更新日期:2009/08/11 1. 本练习机的规划--尤其是分割参数本练习机的规划--尤其是分割参数读完第三章.主机规划与磁碟分割之后, ...
【Jenkins】的四种插件安装方式
一.安装后初次启动时直接进行安装二.在线安装使用该方法安装插件时会自动安装该插件所依赖的其他插件,无需考虑插件之间的依赖性. 1.找到插件管理 Manager Jenkins -> Mana ...
Android开发学习总结(四)——Eclipse在线安装ADT插件
Android开发学习总结(四)--Eclipse在线安装ADT插件要想使用Eclipse开发Android应用,首先要安装一个ADT插件,在此记录一下在Eclipse中采用在线安装的方式ADT插件 ...
Android 6.0 PM机制系列（四） APK安装需要空间分析
前言在Android 9.0 PM机制系列(四) APK安装需要空间分析文章中,我们重点分析了Android9.0需要的最小APK安装存储空间大小.结论就是:只要系统空间小于Math.min(get ...
linux下使用geant4指南,四步轻松安装Geant4 (Linux篇) | 入门
最近开始为订阅号"Geant4不完全学习指南"写一些文章. 正文开始. 四步轻松安装Geant4 (Linux篇) | 入门软件版本:Ubuntu16.04,Geant4.10. ...
slam十四讲-ubuntu20安装opencv3.4.16
slam十四讲-ubuntu20按照opencv3.4.16 slam十四讲-ubuntu20安装opencv3.4.16 opencv 下载依赖库的安装编译安装遇到的问题 slam十四讲-ub ...
linux安装eclipse提示错误,四种Eclipse安装错误的解决办法
Eclipse是java零基础的初学者会首先接触到的java开发环境,我们也学习了Eclipse安装教程,相信大家也按照教程在自己的电脑上操作了一遍.但是肯定有人在安装Eclipse的时候,有不同的E ...
linux运行geant4例子,四步轻松安装Geant4 (Linux篇) | 入门
最近开始为订阅号"Geant4不完全学习指南"写一些文章. 正文开始. 四步轻松安装Geant4 (Linux篇) | 入门软件版本:Ubuntu16.04,Geant4.10. ...

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

前言

往期文章回顾

四、Pinia 的安装及其基本使用相关推荐

最新文章

热门文章