uniapp vuex的使用
实现组件全局(数据)管理的一种机制,可以方便的实现组件之间共享数据,不同于上述三种传递值的方式。
可以把vuex当成一个store仓库,可以集中管理共享的数据,并且存储在vuex中的数据都是响应式的,数据与页面同步。
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中。
注意:如果你使用的是HBuilderX,它已经内置了Vuex。如果你是使用npm或者yarn,可以通过以下命令安装:
安装vuex:
npm install vuex --save
1、创建Vuex的store:
在项目的src目录下创建一个store文件夹,然后在该文件夹中创建一个index.js文件,用于定义和配置Vuex store。

/* // 方式一import { createStore } from 'vuex';export default createStore({state() {return {count:0,// 定义一个名为 name 的状态//公共的变量,存储数据,这里的变量不能随便修改,只能通过触发mutations的方法才能改变};},mutations: {increment(state) {// 定义一个名为 increment 的修改状态方法state.count++;}//相当于同步的操作},actions: {increment({ commit }) {commit('increment');}//相当于异步的操作,不能直接改变state的值,只能通过触发mutations的方法才能改变},getters: {count: (state) => state.count},}); */
// 方式二 推荐
import Vuex from 'vuex';
import {LoginPostMethod} from '@/api/api.js';const store = new Vuex.Store({state: {count:0,// 定义一个名为 name 的状态resToken: '',// 定义token//公共的变量,存储数据,这里的变量不能随便修改,只能通过触发mutations的方法才能改变},mutations: {increment(state) { // 定义一个名为 increment 的修改状态方法state.count ++;},setToken(state,token){// 定义一个名为 setToken 的修改状态方法console.log("state",state);console.log("token",token);state.resToken = token.resToken;uni.setStorageSync('resToken', token.resToken);},setEmptyToken(state){// 定义一个名为 setEmptyToken 的修改状态方法console.log("emptyState",state);state.resToken = '';uni.setStorageSync('resToken', null);},//相当于同步的操作},actions: {// 网络请求async logIn(context,apyload){console.log("context",context);console.log("apyload",apyload);const res = await LoginPostMethod(apyload)console.log('执行成功',res)if(res.success){const token = {resToken: res.token,}// 设置tokencontext.commit('setToken', token)}// 返回值return res;},//相当于异步的操作,不能直接改变state的值,只能通过触发mutations的方法才能改变}})export default store
2、在main.js中引入store并使用:

3.使用
import store from '@/store/index.js';//需要引入store***
export default{data(){return{}},methods:{addCountMethod() { // 定义一个名为 addMethod 的增加 count 的方法// 修改状态方法store.commit('increment');// 获取 state 中的 count 值const curcount = store.state.count;console.log("curcount",curcount);}, setMethodOne(){// 直接调用/store/index.js mutations中定义的方法store.commit("setEmptyToken");},setMethodTwo(){// 调用/store/index.js 中logIn方法const result = await store.dispatch('logIn', res)},}
}
相关文章:
uniapp vuex的使用
实现组件全局(数据)管理的一种机制,可以方便的实现组件之间共享数据,不同于上述三种传递值的方式。 可以把vuex当成一个store仓库,可以集中管理共享的数据,并且存储在vuex中的数据都是响应式的,…...
RabbitMQ实战启程:从原理到部署的全方位探索(上)
文章目录 一、RabbitMQ简介1.1、概述1.2、特性 二、RabbitMQ原理架构三、RabbitMQ应用场景3.1 简单模式3.2 工作模式3.3 发布订阅3.4 路由模式3.5 主题订阅模式 四、同类中间件对比五、RabbitMQ部署5.1 单机部署5.1.1 安装erlang5.1.2 安装rabbitmq 5.2 集群部署(镜…...
【论文复现】轻松利用自适应特征融合实现去雾
📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 智慧医疗 介绍创新点网络结构特征提取阶段自适应融合阶段图像重建阶段上下文增强模块CEM特征融合模块AFM 结果分析 提示 论文题目࿱…...
【大数据学习 | HBASE高级】hbase-phoenix 与二次索引应用
1. hbase-phoenix的应用 1.1 概述: 上面我们学会了hbase的操作和原理,以及外部集成的mr的计算方式,但是我们在使用hbase的时候,有的时候我们要直接操作hbase做部分数据的查询和插入,这种原生的方式操作在工作过程中还…...
高级java每日一道面试题-2024年11月09日-缓存中间件篇-Redis和Memecache有什么区别?
如果有遗漏,评论区告诉我进行补充 面试官: Redis和Memecache有什么区别? 我回答: 一、基础特性 数据类型支持 Redis: 支持多种数据类型,包括字符串(String)、哈希(Hash)、列表(List)、集合…...
vscode 关闭绑定元素 隐式具有“any”类型这类错误
在vue的项目里面,经常看到any类型的报错,真的很烦的 在tsconfig.json中配置以下参数 “noImplicitAny”: false 就可以了 出现类型“never”上不存在属性“userName”。ts-plugin(2339) 配置该参数 modeuleResolution : node "compilerOptions&qu…...
手机ip地址异常怎么解决
在现代社会中,手机已成为我们日常生活中不可或缺的一部分,无论是工作、学习还是娱乐,都离不开网络的支持。然而,有时我们会遇到手机IP地址异常的问题,这不仅会影响我们的网络体验,还可能带来安全隐患。本文…...
【售前方案】工业园区整体解决方案,智慧园区方案,智慧城市方案,智慧各类信息化方案(ppt原件)
基于云计算、物联网、移动通信计算的智慧园区集中运营管理平台是一个高度集成化、智能化的管理系统,它利用先进的技术手段对园区进行全方位的监控和管理。 软件资料清单列表部分文档清单:工作安排任务书,可行性分析报告,立项申请审…...
37.超级简易的计算器 C语言
超级简单,简单到甚至这个计算器输入都比较反人类 但是足够简单 有输入功能有Switch语句支持四种运算还能检查除数是不是0还能打印出完整的式子 #define _CRT_SECURE_NO_WARNINGS// 禁用安全警告 #include <stdio.h>int main() {double num1, num2;// 声明两…...
防火墙----iptables
防火墙是位于内部网和外部网之间的屏障,他按照系统管理员预先定义好的规则来控制数据包的进出 一、iptables简介 防火墙会从以上至下的顺序来读取配置的策略规则,在找到匹配项后就立即结束匹配工作并去执行匹配项中定义的行为(即放行或阻止&…...
若点集A=B则A必能恒等变换地变为B=A这一几何常识推翻直线(平面)公理
黄小宁 关键词:“更无理”复数 复平面z各点z的对应点z1的全体是z1面。z面平移变为z1面就使x轴⊂z面沿本身平移变为ux1轴。R可几何化为R轴,R轴可沿本身平移变为R′轴,R′轴可沿本身平移变为R″轴,...。直线公理和平面公理使几百年…...
网络安全之WINDOWS端口及病毒编写
目录 一、常见端口和服务 二、Windows病毒编写 声明:学习视频来自b站up主 泷羽sec,如涉及侵权马上删除文章 声明:本文主要用作技术分享,所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判…...
Flink 开发工程应加载哪些依赖
在我们要开发Flink程序时,就会涉及到应该加载哪些Flink jar的问题。本章内容就是向你展示如何配置你的项目,添加必要的依赖。 每个应用程序都会依赖一些 Flink libraries,比如至少依赖 Flink APIs库,如果使用了connector,则还需要依赖connector相关的库,比如kafka、jdbc…...
wordpress建外贸独立站常用的多语言插件
WordPress是一个功能强大的内容管理系统,对于外贸独立站来说,多语言支持是非常重要的功能。以下是一些常用的WordPress多语言插件: 1. WPML (WordPress Multilingual) 这是最流行且功能最全面的多语言插件之一。它支持翻译整个网站…...
[SpB]如何开始使用 Spring Boot?
如何开始使用 Spring Boot? Spring Boot 简化了 Java 项目开发,你只需要专注于业务逻辑,底层的很多配置和功能由 Spring Boot 自动帮你处理。下面是你如何快速上手 Spring Boot 的步骤,以及如何通过 IDEA 了解 Spring Boot 的功能…...
蓝桥杯模拟
【问题描述】 如果一个数 p 是个质数,同时又是整数 a 的约数,则 p 称为 a 的一个质因数。 请问 2024 有多少个质因数。 【答案提交】 这是一道结果填空的题,你只需要算出结果后提交即可。本题的结果为一个整数,在提交答案时只…...
数字化转型企业架构设计手册(交付版),企业数字化转型建设思路、本质、数字化架构、数字化规划蓝图(PPT原件获取)
1、企业架构现状分析 2、企业架构内容框架 3、企业架构设计方法 3.1 、业务架构设计方法 3.2 、数据架构设计方法 3.3 、应用架构设计方法 3.4 、技术架构设计方法 软件全套资料部分文档清单: 工作安排任务书,可行性分析报告,立项申请审批表&…...
2. langgraph中的react agent使用 (在react agent添加历史消息)
1. 导入必要的库 首先,我们需要导入所需的库。这里我们使用 langchain_openai 来与 智谱AI 模型进行交互,并使用 langchain_core.tools 来定义自定义工具。 from langchain_openai import ChatOpenAI from typing import Literal from langchain_core.…...
MySQL社区版的启动与连接
1.启动: 注意:MySQL是默认开机自启的 方式一: 1.WinR 的命令行中直接输入services.msc 2.在服务中找到数据库名称,然后鼠标右键点击启动 方式二: 1.在开始选项中搜索“cmd”命令提示符,使用管理员身份运行 …...
【图像压缩感知】论文阅读:Content-Aware Scalable Deep Compressed Sensing
tips: 本文为个人阅读论文的笔记,仅作为学习记录所用。本文参考另一篇论文阅读笔记 Title: Content-Aware Scalable Deep Compressed Sensing Journal: TIP 2022 代码链接: https://github.com/Guaishou74851/CASNet…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重,适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解,并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
Linux基础开发工具——vim工具
文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...
统计学(第8版)——统计抽样学习笔记(考试用)
一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征(均值、比率、总量)控制抽样误差与非抽样误差 解决的核心问题 在成本约束下,用少量样本准确推断总体特征量化估计结果的可靠性(置…...
