当前位置: 首页 > news >正文

uniapp 系统学习,从入门到实战(八)—— Vuex 的使用

全篇大概 4500 字(含代码),建议阅读时间 30min


📚 目录

  1. Vuex核心概念解析
  2. 在 UniApp 中集成Vuex
  3. 状态管理与数据共享实践
  4. 总结

一、Vuex 核心概念解析

1.1 什么是状态管理

在跨多组件的大型应用中,不同页面/组件需要共享和修改相同数据时,直接通过 Props/Event 传递会导致代码冗余和维护困难。Vuex 作为 ​集中式状态管理方案,通过统一存储和管理应用级状态,实现数据流的可预测性。

1.2 Vuex 五大核心概念

State(状态)
单一数据源,所有组件共享的数据存储对象

// store/index.js
export default new Vuex.Store({state: {userInfo: null,     // 用户信息cartItems: [],      // 购物车商品themeColor: '#42b983' // 全局主题色}
})

Getters(派生状态)
基于 State 的计算属性,用于派生复杂数据

getters: {totalPrice: state => {return state.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)},isLoggedIn: state => !!state.userInfo
}

Mutations(同步修改)
唯一修改 State 的方法,必须是同步函数

mutations: {SET_USER(state, user) {state.userInfo = user},ADD_TO_CART(state, product) {const item = state.cartItems.find(p => p.id === product.id)item ? item.quantity++ : state.cartItems.push({...product, quantity: 1})}
}

Actions(异步操作)
处理异步逻辑后提交 Mutations

actions: {async login({ commit }, credentials) {const res = await uni.request({url: '/api/login',method: 'POST',data: credentials})commit('SET_USER', res.data)}
}

Modules(模块化)
将复杂 Store 拆分为多个模块

// store/modules/cart.js
export default {namespaced: true,state: { items: [] },mutations: { /* ... */ }
}

二、在 UniApp 中集成 Vuex

2.1 安装与配置

步骤 1:安装依赖

npm install vuex --save

步骤 2:创建 Store 结构

├── store/
│   ├── index.js       # 主入口
│   ├── modules/       # 模块目录
│   │   └── user.js
│   └── types.js       # Mutation 类型常量

步骤 3:初始化 Store

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'Vue.use(Vuex)export default new Vuex.Store({modules: {user}
})

步骤 4:挂载到 UniApp

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({store,...App
})
app.$mount()

三、状态管理与数据共享实践

3.1 基础使用场景

场景 1:全局用户状态管理

<!-- pages/user/login.vue -->
<script>
export default {methods: {handleLogin() {this.$store.dispatch('user/login', {username: 'test',password: '123456'}).then(() => {uni.switchTab({ url: '/pages/home/index' })})}}
}
</script>

场景 2:跨页面共享购物车数据

// 组件中访问购物车
computed: {cartItems() {return this.$store.state.cart.items},total() {return this.$store.getters['cart/totalPrice']}
}

3.2 模块化高级实践

模块定义

// store/modules/user.js
export default {namespaced: true,state: () => ({token: uni.getStorageSync('token') || null,profile: null}),mutations: {SET_TOKEN(state, token) {state.token = tokenuni.setStorageSync('token', token)},SET_PROFILE(state, user) {state.profile = user}},actions: {async fetchProfile({ commit }) {const { data } = await uni.$http.get('/user/profile')commit('SET_PROFILE', data)}}
}

跨模块调用

// 在购物车模块中获取用户ID
actions: {async loadCart({ rootState, commit }) {const userId = rootState.user.profile.idconst res = await uni.$http.get(`/cart/${userId}`)commit('INIT_CART', res.data)}
}

3.3 持久化存储方案

使用 vuex-persistedstate

npm install vuex-persistedstate

// store/index.js
import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({plugins: [createPersistedState({key: 'my-app-store',paths: ['user.token', 'settings.theme'],storage: {getItem: key => uni.getStorageSync(key),setItem: (key, value) => uni.setStorageSync(key, value),removeItem: key => uni.removeStorageSync(key)}})]
})

四、最佳实践与性能优化

4.1 代码组织规范

// store/types.js
export const SET_USER = 'user/SET_USER'
export const ADD_PRODUCT = 'cart/ADD_PRODUCT'// 使用常量代替字符串
mutations: {[SET_USER](state, payload) { /* ... */ }
}

4.2 严格模式与调试

// 开发环境开启严格模式
export default new Vuex.Store({strict: process.env.NODE_ENV !== 'production'
})

4.3 性能优化策略

使用 mapState 辅助函数

<script>
import { mapState, mapGetters } from 'vuex'export default {computed: {...mapState(['themeColor']),...mapGetters(['isLoggedIn'])}
}
</script>

避免过度渲染

// 使用 Object.assign 创建新引用
mutations: {UPDATE_ITEM(state, payload) {state.items = Object.assign({}, state.items, payload)}
}

五、实战案例:全局主题切换

5.1 Store 定义

// store/modules/settings.js
export default {namespaced: true,state: () => ({theme: 'light',colors: {light: { primary: '#42b983' },dark: { primary: '#34495e' }}}),mutations: {TOGGLE_THEME(state) {state.theme = state.theme === 'light' ? 'dark' : 'light'}}
}

5.2 组件中使用

<template><view :style="{ backgroundColor: themeColor }"><button @click="toggleTheme">切换主题</button></view>
</template><script>
import { mapState, mapMutations } from 'vuex'export default {computed: {...mapState('settings', ['theme', 'colors']),themeColor() {return this.colors[this.theme].primary}},methods: {...mapMutations('settings', ['TOGGLE_THEME']),toggleTheme() {this.TOGGLE_THEME()}}
}
</script>

总结

通过 Vuex 在 UniApp 中实现状态管理,开发者可以:

  • 集中管理跨组件共享数据
  • 通过严格的修改流程保证数据可追溯
  • 实现高效的模块化开发
  • 结合 UniApp 特性处理多端存储

相关文章:

uniapp 系统学习,从入门到实战(八)—— Vuex 的使用

全篇大概 4500 字(含代码)&#xff0c;建议阅读时间 30min &#x1f4da; 目录 Vuex核心概念解析在 UniApp 中集成Vuex状态管理与数据共享实践总结 一、Vuex 核心概念解析 1.1 什么是状态管理 在跨多组件的大型应用中&#xff0c;不同页面/组件需要共享和修改相同数据时&am…...

Vue Hooks 深度解析:从原理到实践

Vue Hooks 深度解析&#xff1a;从原理到实践 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff01;点我试试&#xff01;&#xff01; 文章目录 Vue Hooks 深度解析&#xff1a;从原理到实践一、背景…...

django中序列化器serializer 的高级使用和需要注意的点

在 Django REST framework(DRF)中,序列化器(Serializer)是一个强大的工具,用于将复杂的数据类型(如 Django 模型实例)转换为 Python 原生数据类型,以便将其渲染为 JSON、XML 等格式,同时也能将接收到的外部数据反序列化为 Django 模型实例。以下将介绍序列化器的高级…...

靶场(二)---靶场心得小白分享

开始&#xff1a; 看一下本地IP 21有未授权访问的话&#xff0c;就从21先看起 PORT STATE SERVICE VERSION 20/tcp closed ftp-data 21/tcp open ftp vsftpd 2.0.8 or later | ftp-anon: Anonymous FTP login allowed (FTP code 230) |_Cant get dire…...

PHP Error处理指南

PHP Error处理指南 引言 在PHP开发过程中,错误处理是一个至关重要的环节。正确的错误处理不仅能够提高代码的健壮性,还能提升用户体验。本文将详细介绍PHP中常见的错误类型、错误处理机制以及最佳实践,帮助开发者更好地应对和处理PHP错误。 PHP错误类型 在PHP中,错误主…...

视频输入设备-V4L2的开发流程简述

一、摄像头的工作原理与应用 基本概念 V4L2的全称是Video For Linux Two&#xff0c;其实指的是V4L的升级版&#xff0c;是linux系统关于视频设备的内核驱动&#xff0c;同时V4L2也包含Linux系统下关于视频以及音频采集的接口&#xff0c;只需要配合对应的视频采集设备就可以实…...

【Manus资料合集】激活码内测渠道+《Manus Al:Agent应用的ChatGPT时刻》(附资源)

DeepSeek 之后&#xff0c;又一个AI沸腾&#xff0c;冲击的不仅仅是通用大模型。 ——全球首款通用AI Agent的破圈启示录 2025年3月6日凌晨&#xff0c;全球AI圈被一款名为Manus的产品彻底点燃。由Monica团队&#xff08;隶属中国夜莺科技&#xff09;推出的“全球首款通用AI…...

Mybatis集合嵌套查询,三级嵌套

三个表&#xff1a;房间 玩家 玩家信息 知识点&#xff1a;Mybatis中级联有关联&#xff08;association&#xff09;、集合&#xff08;collection&#xff09;、鉴别器&#xff08;discriminator&#xff09;三种。其中&#xff0c;association对应一对一关系、collectio…...

thinkphp5.1 在fetch模版就超时

场景 当被渲染模版不存在&#xff0c;请求不响应任何内容&#xff0c;过一会就timeout 排查过程 使用xdebug,追踪代码&#xff0c;发现走到D:\temporary_files\m40285_mini\40285_mini\thinkphp\library\think\exception\Handle.php&#xff0c;进入死循环&#xff0c;一直…...

Dockerfile 深入浅出:从基础到进阶全解析

Dockerfile 深入浅出&#xff1a;从基础到进阶全解析 各位同学&#xff0c;大家好&#xff01;欢迎来到今天的 Dockerfile 课程。Docker 技术在当今的软件开发和部署领域可以说是非常热门&#xff0c;而 Dockerfile 作为构建 Docker 镜像的关键文件&#xff0c;掌握它对于我们…...

CAD2025电脑置要求

Windows 系统 操作系统&#xff1a;64 位 Microsoft Windows 11 和 Windows 10 version 1809 或更高版本。 处理器 基本要求&#xff1a;2.5-2.9GHz 处理器&#xff0c;不支持 ARM 处理器。 推荐配置&#xff1a;3GHz 以上处理器&#xff08;基础&#xff09;&#xff0c;4GHz …...

android App主题颜色动态更换

如何在Android开发中更换主题颜色&#xff0c;现在他们又问了关于动态更换应用主题颜色的问题。看来他们可能在实现过程中遇到了困难&#xff0c;或者需要更详细的动态切换指导。首先&#xff0c;我需要回顾之前的回答&#xff0c;看看是否已经覆盖了动态切换的部分&#xff0c…...

微服务,服务治理nacos,负载均衡LOadBalancer,OpenFeign

1.微服务 简单来说&#xff0c;微服务架构风格[1]是一种将一个单一应用程序开发为一组小型服务的方法&#xff0c;每个服务运行在 自己的进程中&#xff0c;服务间通信采用轻量级通信机制(通常用HTTP资源API)。这些服务围绕业务能力构建并 且可通过全自动部署机制独立部署。这…...

浅论数据库聚合:合理使用LambdaQueryWrapper和XML

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数据库聚合替代内存计算&#xff08;关键优化&#xff09;二、批量处理优化四、区域特殊处理解耦五、防御性编程增强 前言 技术认知点&#xff1a;使用 XM…...

FastGPT 引申:混合检索完整实例

文章目录 FastGPT 引申&#xff1a;混合检索完整实例1. 各检索方式的初始结果2. RRF合并过程3. 合并后的结果4. Rerank重排序后5. 最终RRF合并6. 内容总结 FastGPT 引申&#xff1a;混合检索完整实例 下边通过一个简单的例子说明不同检索方式的分值变化过程&#xff0c;假设我…...

Socket.IO聊天室

项目代码 https://github.com/R-K05/Socket.IO- 创建项目 服务端项目和客户端项目 安装Socket依赖 服务端 npm i socket.io 客户端 npm i socket.io-client 客户端添加聊天页面 源码 服务端 app.js const express require("express") const app express()co…...

MySQL表中数据基本操作

1.表中数据的插入&#xff1a; 1.insert insert [into] table_name [(column [,column]...)] values (value_list) [,(value_list)] ... 创建一张学生表&#xff1a; 1.1单行指定列插入&#xff1a; insert into student (name,qq) values (‘张三’,’1234455’); values左…...

可狱可囚的爬虫系列课程 16:爬虫重试机制

一、retrying模块简介 在爬虫中&#xff0c;因为我们是在线爬取内容&#xff0c;所以可能会因为网络、服务器等原因导致报错&#xff0c;那么这类错误出现以后&#xff0c;我们想要做的肯定是在报错处进行重试操作&#xff0c;Python提供了一个很好的模块&#xff0c;能够直接帮…...

第十五届蓝桥杯----B组cpp----真题解析(小白版本)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 必看前言&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;一、试题A&#xff1a;握手问题1.题意分析2.代码解答 二、试题B&#xff1a;小球反弹1.题意…...

软考架构师笔记-数据库系统

1.7 数据库系统 三级模式-两级映射 三级模式 外模式&#xff1a;用户视图概念模式&#xff1a;只涉及描述内模式&#xff1a;存储方式的描述 两级映射 外模式-概念模式映射概念模式-内模式映射 数据库的设计 步骤 需求分析 输出为需求分析、数据流图(Data FLow Diagram-DF…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...