vue2项目迁移到vue3中的改动——vuex部分——基础积累2

news2024/12/25 1:23:30

pinia中文文档里面有关于vuex的部分:

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起,最初的原则仍然相同,但 Pinia 对 Vue 2 和 Vue 3 都有效,并且不需要您使用组合 API。 除了安装和 SSR 之外,两者的 API 都是相同的,并且这些文档针对 Vue 3,并在必要时提供有关 Vue 2 的注释,以便 Vue 2 和 Vue 3 用户可以阅读!

为什么要使用 Pinia?

Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:

dev-tools 支持

跟踪动作、突变的时间线
Store 出现在使用它们的组件中
time travel 和 更容易的调试

热模块更换

在不重新加载页面的情况下修改您的 Store
在开发时保持任何现有状态

插件:使用插件扩展 Pinia 功能

为 JS 用户提供适当的 TypeScript 支持或 autocompletion

服务器端渲染支持

在这里插入图片描述
在这里插入图片描述

vuex的使用

export const useAccountStore = defineStore('account', {
state:{
	return{
		permissions:[],
		account:{}
	}
},
getters: {
  permissions: () => {
    const permissions = localStorage.getItem(import.meta.env.VITE_PERMISSIONS_KEY);
    const permissionsParse = JSON.parse(permissions);
    return permissionsParse ? permissionsParse : [];
  },
  account: () => {
    const user = localStorage.getItem(import.meta.env.VITE_USER_KEY);
    const account = JSON.parse(user);
    return account;
  },
},
actions: {
    async profile(callback) {
      applicationConfiguration()
        .then((res) => {
          let data: any = res;
          data.currentUser.tenantName = data.currentTenant.name;
          let permissions = handlePermissionsNew(data.auth.grantedPolicies);
          const { setAuthorities } = useAuthStore();
          localStorage.setItem(import.meta.env.VITE_PERMISSIONS_KEY, JSON.stringify(permissions));
          this.role = data.currentUser.roles;
          GetUserInfo().then((res) => {
            if (res.code == 1) {
              let account = {
                ...data.currentUser,
                headPhoto: res.data?.extraProperties?.HeadPhoto,
              };
              localStorage.setItem(import.meta.env.VITE_USER_KEY, JSON.stringify(account));
              setAuthorities(permissions);
              callback && callback('success', account);
            }
          });
        })
        .catch(() => {
          callback && callback('error');
        });
    }
  },
})

例如上面的account,可以通过下面的方式来处理:

  import { useAccountStore } from '@/store';
  import { mapState } from 'pinia';
computed: {
  ...mapState(useAccountStore, ['account']),
},

如果是actions中的方法,则可以通过下面的方法

methods:{
	...mapActions(useCounterStore, ['profile']),
}

此时可以直接使用this.profile的方法来调用权限的接口了。

下面写使用方法:

handleOk() {
  this.confirmLoading = true;
  let values = {
    ...this.form,
    extraProperties: {
      JobNo: this.form.jobNo,
      HeadPhoto: this.form.headPhoto,
    },
  };
  createUpdate(values)
    .then((res) => {
      this.visible = false;
      if (this.form.id == this.account.id) {
        this.profile((res, account) => {});
      }
      this.$message.info('操作成功');
    })
    .finally(() => {
      this.confirmLoading = false;
    });
},

完成!!!多多积累,多多收获!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/788081.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【使用时空RBF-NN进行非线性系统识别】实现了 RBF、分数 RBF 和时空 RBF 神经网络,用于非线性系统识别研究(Matlab代码实现)

目录 💥1 概述 📚2 运行结果 2.1 算例1 2.2 算例2 🎉3 参考文献 🌈4 Matlab代码实现 💥1 概述 本文用于非线性系统识别任务的径向基函数神经网络(RBF-NN)的三种变体。特别是,我实现…

Cesium态势标绘专题-正多边形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

Android OpenGL 教程——窗口初始化绘制矩形

上节介绍了 Native 工程初始化,但是我们的窗口什么都没有,这节我们将 NativeActivity 创建的 window 绑定到 OpenGL 创建的 display 的 surface 上,并且绘制背景颜色和三角形,通过三角形绘制出一个矩形 显示系统创建 void Rende…

app专项性能测试测试指标和测试方法

工作中没有做过app这块的性能测试,但是你有面试问到过,现在做个总结如下 1、首次加载(冷启动) A.使用logcat监控activitymanager B.adb shell am start -w C.人工秒表计数 2、非第一启动(热启动) 应…

【开发心得】百度终于向百度发起挑战

没错,题目的确读起来别扭,但事实如此。 第一个百度,说的是百度的“文心千帆”。(以下简称“千帆”) 第二个百度,说的是百度的“搜索引擎”。(以下简称“搜索”) 这么讲就容易理解…

深入了解数据库的索引分类以及回表查询原理

索引的分类 在InnoDB存储引擎中的又可以分为以下两种 聚集索引的选取规则 如果有主键,主键索引就是聚集索引。 如果不存在主键,将会使用第一个唯一(UNIQUE)索引作为聚集索引 如果表没有主键,或者没有合适的唯一索引…

机场室内定位导航系统解决方案:提升旅客体验和机场运营效率

旅游业已开始回暖,作为旅客流动的核心节点,正逢暑假亲子出行,日益增长的客流量会对机场的运营和管理带来相当的冲击和挑战。 为提升旅客的出行体验和机场的优化运营管理效率,华安联大推荐采用机场室内定位导航系统解决方案。 基于…

【力扣刷题 | 第二十二天】

目录 前言: 63. 不同路径 II - 力扣(LeetCode) 343. 整数拆分 - 力扣(LeetCode) 总结: 前言: 今天我们爆刷动态规划章节的题目,相关的算法理论介绍我也有写过文章:【夜…

TCL(Tool Command Language)学习(一)-----基本指令

一、置换语句 变量置换$ TCL解释器会将认为$后面为变量名,将变量置换乘它的值, []命令置换、[]内是一个独立的TCL语句 \反斜杠置换 换行符。空格、[、$等被TCL解释器当作特殊符号对待的字符,加上反斜杠后变成普通字符 “”CL对双引号中…

Rocket-Spring Cloud Stream

一.Spring Cloud Stream简介 1.微服务中会经常使用消息中间件,通过消息中间件在服务与服务之间传递消息,例如RabbitMQ、Kafka和RocketMQ,无论使用哪一种消息中间件和服务之间都有一点耦合性,这个耦合性指的是原来使用RabbitMQ&am…

Python获取股票数据——以沪深300成分股为例

目录 1、Baostock2、Tushare pro版3、AKshare4、聚宽量化平台 需求是下载比如从2020-01-01到2022-12-31区间的沪深300成分股每支股票的日K线数据,没错这是个面板数据,原本以为直接通过Python接口可以直接下载到,因为之前找的上证综指啥的用R的…

软著代码整理工具(针对cpp代码),python实现

一. 内容简介 软著代码整理工具(针对cpp代码),python实现 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3代码链接 https://gitee.com/JJW_1601897441/csdn 三.主要流程 3.1 格式要求 代码语法要求 对软件著作权提交源代码是提供原始的代码…

AcWing241. 楼兰图腾(树状数组)

输入样例: 5 1 5 3 2 4输出样例: 3 4解析: 以某个点 i 为最低点的 V 的数量,为 i 左侧和右侧比 a[ i ] 大的数量 a,b 的乘积。 但是,直接求这两个数的复杂度为O(n),则整个复杂度为O( n^2 )&am…

TortoiseGit安装

1、TortoiseGit简介 TortoiseGit是基于TortoiseSVN的Git版本的Windows Shell界面。它是开源的,可以完全免费使用。 TortoiseGit 支持你执行常规任务,例如commit、显示日志、区分两个版本、创建分支和标签、创建补丁等。 2、TortoiseGit下载 (1)Tortois…

MySQL高级篇第2章(MySQL的数据目录)

文章目录 1、MySQL8的主要目录结构1.1 数据库文件的存放路径1.2 相关命令目录1.3 配置文件目录 2、数据库和文件系统的关系2.1 查看默认数据库2.2 数据库在文件系统中的表示2.3 表在文件系统中的表示2.3.1 InnoDB存储引擎模式2.3.2 MyISAM存储引擎模式 2.4 小结 1、MySQL8的主要…

论文笔记--Skip-Thought Vectors

论文笔记--Skip-Thought Vectors 1. 文章简介2. 文章概括3 文章重点技术3.1 Skip Thought Vectors3.2 词表拓展 4. 文章亮点5. 原文传送门6. References 1. 文章简介 标题:Skip-Thought Vectors作者:Ryan Kiros, Yukun Zhu, Ruslan Salakhutdinov, Rich…

【设计模式——学习笔记】23种设计模式——桥接模式Bridge(原理讲解+应用场景介绍+案例介绍+Java代码实现)

问题引入 现在对不同手机类型的不同品牌实现操作编程(比如:开机、关机、上网,打电话等),如图 【对应类图】 【分析】 扩展性问题(类爆炸),如果我们再增加手机的样式(旋转式),就需要增加各个品牌手机的类,同样如果我们…

JDK9 接口特性(heima)

JDK9 接口特性(heima) 将log方法私有化

04. Idea集成Docker

目录 1、前言 2、开启docker远程 2.1、配置远程访问模式 2.2、重启docker服务 2.3、验证 3、Idea配置Docker 3.1、配置证书登录 4、创建Dockerfile 4.1、编写Dockerfile 4.2、配置启动项 4.3、访问接口 1、前言 上一节中,我们介绍了Dockerfile的方式构建…

MURF20100CT-ASEMI快恢复对管20A 1000V

编辑:ll MURF20100CT-ASEMI快恢复对管20A 1000V 型号:MURF20100CT 品牌:ASEMI 封装:TO-220F 恢复时间:50ns 正向电流:20A 反向耐压:1000V 芯片大小:102MIL*2 芯片个数&…