vuex的使用

article/2025/7/13 8:14:23

❀ ❀ ❀ ❀ ❀ ❀ ❀

vuex的官网 ❀

❀ ❀ ❀ ❀ ❀ ❀ ❀

  • 这里用法不纯粹。用户toolbar页面切换时的传参。若后期有更好的方式,会更改。因vuex用于全局,在这个场景下使用有点大材小用了

其中需要注意的点就是更新、获取状态

  • 更新状态。updateProjectId在index.js需要配置同名的方法到actions
this.$store.dispatch('updateProjectId',"更新的内容");
  • 获取状态。getters中也需要配置
this.$store.getters.状态名

在这里插入图片描述

  • 下面是配置的代码 store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import config from "../common/config.js" // 全局配置文件
Vue.use(Vuex)let lifeData = {};try{// 尝试获取本地是否存在lifeData变量,第一次启动APP时是不存在的lifeData = uni.getStorageSync('lifeData');
}catch(e){}// 需要永久存储,且下次APP启动需要取出的,在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_city'];// 保存变量到本地存储中
const saveLifeData = function(key, value){// 判断变量名是否在需要存储的数组中if(saveStateKeys.indexOf(key) != -1) {// 获取本地存储的lifeData对象,将变量添加到对象中let tmp = uni.getStorageSync('lifeData');// 第一次打开APP,不存在lifeData变量,故放一个{}空对象tmp = tmp ? tmp : {};tmp[key] = value;// 执行这一步后,所有需要存储的变量,都挂载在本地的lifeData对象中uni.setStorageSync('lifeData', tmp);}
}
const store = new Vuex.Store({state: {// 如果上面从本地获取的lifeData对象下有对应的属性,就赋值给state中对应的变量// 加上vuex_前缀,是防止变量名冲突,也让人一目了然vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {},vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',// vuex_city: lifeData.vuex_city ? lifeData.vuex_city : '',// 如果vuex_version无需保存到本地永久存储,无需lifeData.vuex_version方式vuex_version: config.vuex_version,vuex_demo: 'demo',projectId: null},mutations: {$uStore(state, payload) {// 判断是否多层级调用,state中为对象存在的情况,诸如user.info.score = 1let nameArr = payload.name.split('.');let saveKey = '';let len = nameArr.length;if(len >= 2) {let obj = state[nameArr[0]];for(let i = 1; i < len - 1; i ++) {obj = obj[nameArr[i]];}obj[nameArr[len - 1]] = payload.value;saveKey = nameArr[0];} else {// 单层级变量,在state就是一个普通变量的情况state[payload.name] = payload.value;saveKey = payload.name;}// 保存变量到本地,见顶部函数定义saveLifeData(saveKey, state[saveKey])},setProjectId(state, id) {state.projectId = id}},actions: {updateProjectId({commit}, id) {commit('setProjectId', id)}},getters: {projectId: state => state.projectId}
})export default store

http://www.hkcw.cn/article/nIvEIRYJua.shtml

相关文章

Calendar和Datepicker

Displaystart Displayend "2024-10-8" selectedDate属性 设定选择的日期 在 C# 中&#xff0c;DateTime? date1 表示 **一个可空的 DateTime 类型变量**。 &#xff1f;.是不为零 ?是可以为零0️⃣ 多选 selectionmode none不让选 singlerange shift …

赛事获奖|TsingtaoAI荣获“雄才杯”2025创新创业大赛总决赛奖项

5月16-18日&#xff0c;由雄安新区党工委人才工作领导小组办公室主办的“雄才杯”2025创新创业大赛总决赛在雄安新区成功举办。TsingtaoAI凭借“基于DeepSeek的具身智能实训”项目荣获优胜奖&#xff0c;本项目为参赛项目中唯一的教育科技服务类获奖项目。 大赛背景 本次总决…

初识vue3(vue简介,环境配置,setup语法糖)

一&#xff0c;前言 今天学习vue3 二&#xff0c;vue简介及如何创建vue工程 Vue 3 简介 Vue.js&#xff08;读音 /vjuː/&#xff0c;类似 “view”&#xff09;是一款流行的渐进式 JavaScript 框架&#xff0c;用于构建用户界面。Vue 3 是其第三代主要版本&#xff0c;于 …

C++面向对象(二)

面向对象基础内容参考&#xff1a; C面向对象&#xff08;一&#xff09;-CSDN博客 友元函数 类的友元函数是定义在类外部&#xff0c;但有权访问类的所有私有&#xff08;private&#xff09;成员和保护&#xff08;protected&#xff09;成员。尽管友元函数的原型有在类的定…

基于AIS的海洋观测应用

知识星球&#xff1a;数据书局。打算通过知识星球将这些年积累的知识、经验分享出来&#xff0c;让各位在数据治理、数据分析的路上少走弯路&#xff0c;另外星球也方便动态更新最近的资料&#xff0c;提供各位一起讨论数据的小圈子 1.背景 船舶自动识别系统&#xff08;Aut…

imx6ull(0):烧录、启动

参考内容&#xff1a; i.MX6ULL Applications Processors for Industrial Products i.MX6ULLApplicationsProcessorReferenceManual 正点原子 I.MX6U嵌入式Linux驱动开发指南 以及 广大工程师们在互联网上分享的学习笔记(一样东西学的人多的时候所带来的优势) 例如这里我用…

CloudCompare——使用CSF算法进行点云高程归一化

目录 1.算法原理2.软件操作2.1 CSF算法2.2 生成CSF网格2.3 平滑网格(可选)2.4 计算点云到网格的距离2.5 将计算得到的距离赋值给高程 3.结果展示3.1 原始点云3.2 归一化结果 1.算法原理 点云高程归一化的关键在于获取原始点云地面数据的DEM。可选取CSF算法提取样地点云地面DEM。…

【C语言】C语言经典小游戏:贪吃蛇(下)

文章目录 一、游戏前准备二、游戏开始1、游戏开始函数&#xff08;GameStart&#xff09;1&#xff09;打印欢迎界⾯&#xff08;WelcomeToGame&#xff09;2&#xff09;创建地图&#xff08;CreateMap&#xff09;3&#xff09;初始化蛇⾝&#xff08;InitSnake&#xff09;4…

循序渐进 Android Binder(一):IPC 基本概念和 AIDL 跨进程通信的简单实例

Binder 给人的第一印象是”捆绑者“&#xff0c;即将两个需要建立关系的事物用某些工具束缚在一起。在 Android 中&#xff0c;Binder 是一种高效的跨进程通信&#xff08;IPC&#xff09;机制&#xff0c;它将可以将运行在不同进程中的组件进行绑定&#xff0c;以实现彼此通信…

ISBN书号查询接口如何用PHP实现调用?

一、什么是ISBN书号查询接口 ISBN数据查询接口是一项图书信息查询服务。它基于全球通用的ISBN编码系统&#xff0c;帮助用户快速获取图书的详细信息&#xff0c;包括书名、作者、出版社、出版时间、价格、封面等关键字段。 该接口广泛应用于电商平台、图书馆管理系统、二手书…

Linux(信号)

目录 一 什么是信号 二 Linux中的信号 1. 查看信号&#xff1a;kill -l 2. 自定义信号的处理方式 2.1 API 2.2 demo 3. 理解信号的发送 4. 信号产生的方式 三 信号保存 四 捕捉信号 1. 先来说说硬件中断&#xff1a; 1. 谁调度操作系统&#xff1f; 2. 理解时间片…

[Windows] Simple Live v1.8.3 开源聚合直播 :支持哔哩哔哩 虎牙 斗鱼 抖音

Simple Live 是一款基于 AllLive 项目 开发的开源聚合直播 APP&#xff0c;支持 哔哩哔哩、虎牙、斗鱼、抖音 等主流平台&#xff0c;具备 无广告、低占用、弹幕互动 等核心优势。其核心功能包括&#xff1a;全平台覆盖&#xff1a;一站式聚合多平台直播资源&#xff0c;无需切…

第十天:Java反射

反射 反射就是&#xff1a;加载类&#xff0c;并编写代码获取类中的成员变量&#xff0c;方法&#xff0c;构造器等。 注意&#xff1a;反射&#xff0c;注解&#xff0c;动态代理就是用来学习框架做框架的&#xff0c;在平时业务开发需求上很少用到。 1 反射学什么&#xf…

整数有约 | 刘乾专访:继续预训练策略与数据优化之道

人工智能多语言处理近年来得到了极大的关注&#xff0c;尤其是在以东南亚为代表的小语种环境中&#xff0c;其特殊的语言多样性和语料库稀缺性使得研究挑战和机遇并存。在现有的自然语言处理模型中&#xff0c;英语和中文因为有海量高质量数据的支持&#xff0c;常被作为核心语…

Google 发布的全新导航库:Jetpack Navigation 3

前言 多年来&#xff0c;Jetpack Navigation 库一直是开发者的重要工具&#xff0c;但随着 Android 用户界面领域的发展&#xff0c;特别是大屏设备的出现和 Jetpack Compose 的兴起&#xff0c;Navigation 的功能也需要与时俱进。 今年的 Google I/O 上重点介绍了 Jetpack Na…

抖音商城抓包 分析

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 抓包展示 总结 1.出于安全考虑,本章未…

uniapp-商城-77-shop(8.2-商品列表,地址信息添加,级联选择器picker)

地址信息,在我们支付订单上有这样一个接口,就是物流方式,一个自提,我们就显示商家地址。一个是外送,就是用户自己填写的地址。 这里先说说用户的地址添加。需要使用到的一些方式方法,主要有关于地址选择器,就是uni-data-picker级联选择。 该文介绍了电商应用中地址信息处…

AlmaLinux OS 10 正式发布:兼容 RHEL 10 带来多项技术革新

AlmaLinux OS 基金会日前宣布推出 AlmaLinux OS 10&#xff0c;该版本代号代号紫色的狮子 (Purple Lion)&#xff0c;新版本带来多项新功能和技术更新&#xff0c;旨在为用户提供更强大的企业级 Linux 体验。 该系统使用与 RHEL 10 相同的源代码构建并于 RHEL 10 保持完全兼…

深入理解C# MVVM模式:从理论到实践

在现代软件开发中&#xff0c;良好的架构设计对于构建可维护、可测试和可扩展的应用程序至关重要。Model-View-ViewModel (MVVM) 是一种特别适合XAML-based应用程序&#xff08;如WPF、Xamarin和UWP&#xff09;的架构模式。本文将全面探讨MVVM模式的概念、实现细节、最佳实践以…

Git GitHub Gitee

一、Git 是一个免费、开源的分布式版本控制系统。 版本控制&#xff1a;一种记录文件内容变化&#xff0c;以便将来查阅特定版本修订情况的系统。它最重要的就是可以记录文件修改历史记录&#xff0c;从而让用户可以看历史版本&#xff0c;方便版本切换。 1.和集中式版本控制…