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

009 uni-app之vue、vuex

vue.js 视频教程

vue3.js 中文官网

vue.js 视频教程

vue语法:https://uniapp.dcloud.net.cn/tutorial/vue-vuex.html

vue2迁移到 vue3:https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理有5个核心

每一个 Vuex 应用的核心就是 store(仓库),它包含着你的应用中大部分的状态 (state)。

状态管理有5个核心:state、getter、mutation、action、module。

mapState、mapGetters、mapMutations、mapActions

import

// 页面路径:store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex);//vue的插件机制//Vuex.Store 构造器选项
const store = new Vuex.Store({state:{//存放状态"username":"foo","age":18}
})
export default store
// 页面路径:main.js
import Vue from 'vue'
import App from './App'
import store from './store'Vue.prototype.$store = store// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
const app = new Vue({store,...App
})
app.$mount()
<!-- 页面路径:pages/index/index.vue -->
<template><view><text>用户名:{{username}}</text></view>
</template>
<script>import store from '@/store/index.js';//需要引入storeexport default {data() {return {}},computed: {username() {return store.state.username }}}
</script>

三种访问方式:

computed: {username() {return store.state.username }}
computed: {username() {return this.$store.state.username }}
computed: mapState({// 从state中拿到数据 箭头函数可使代码更简练username: state => state.username,age: state => state.age,}) 

Getter

getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)}}

Mutation

  • Vuex中store数据改变的唯一方法就是mutation
  • Mutation 必须是同步函数
mutations: {add(state) {// 变更状态state.count += 2}}
methods: {addCount() {store.commit('add')}}

action

  • action 提交的是 mutation,通过 mutation 来改变 state ,而不是直接变更状态。
  • action 可以包含任意异步操作。
  • action 可以执行任意的同步和异步操作
actions:{addCountAction (context) {context.commit('add')}}

分发 Action:
actions 通过 store.dispatch 方法触发。

methods: {add () {store.dispatch('addCountAction')}}

actions 支持以载荷形式分发:

actions:{addCountAction (context , payload) {context.commit('add',payload)}}

Module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

├── components             # 组件文件夹└── myButton └── myButton.vue   # myButton组件
├── pages└── index └── index.vue      # index页面
├── static
├── store├── index.js          # 我们组装模块并导出 store 的地方└── modules           # 模块文件夹├── moduleA.js    # 模块moduleA└── moduleB.js    # 模块moduleB
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss
	//  页面路径:store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import moduleA from '@/store/modules/moduleA'import moduleB from '@/store/modules/moduleB'Vue.use(Vuex)export default new Vuex.Store({modules:{moduleA,moduleB}})

相关文章:

009 uni-app之vue、vuex

vue.js 视频教程 vue3.js 中文官网 vue.js 视频教程 vue语法&#xff1a;https://uniapp.dcloud.net.cn/tutorial/vue-vuex.html vue2迁移到 vue3&#xff1a;https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html Vuex Vuex 是一个专为 Vue.js 应用程序开发的…...

Linux防火墙——SNAT、DNAT

目录 NAT 一、SNAT策略及作用 1、概述 SNAT应用环境 SNAT原理 SNAT转换前提条件 1、临时打开 2、永久打开 3、SNAT转换1&#xff1a;固定的公网IP地址 4、SNAT转换2&#xff1a;非固定的公网IP地址&#xff08;共享动态IP地址&#xff09; 二、SNAT实验 配置web服务…...

递归理解三:深度、广度优先搜索,n叉树遍历,n并列递归理解与转非递归

参考资料&#xff1a; DFS 参考文章BFS 参考文章DFS 参考视频二叉树遍历规律递归原理源码N叉树规律总结&#xff1a; 由前面二叉树的遍历规律和递归的基本原理&#xff0c;我们可以看到&#xff0c;二叉树遍历口诀和二叉树递推公式有着紧密的联系 前序遍历&#xff1a;F(x…...

MATLAB 2023a安装包下载及安装教程

[软件名称]:MATLAB 2023a [软件大小]: 12.2 GB [安装环境]: Win11/Win 10/Win 7 [软件安装包下载]:https://pan.quark.cn/s/8e24d77ab005 MATLAB和Mathematica、Maple并称为三大数学软件。它在数学类科技应用软件中在数值计算方面首屈一指。行矩阵运算、绘制函数和数据、实现算…...

QT学习开发笔记(数据库之实用时钟)

数据库 数据库是什么&#xff1f;简易言之&#xff0c;就是保存数据的文件。可以存储大量数据&#xff0c;包括插入数据、更 新数据、截取数据等。用专业术语来说&#xff0c;数据库是“按照数据结构来组织、存储和管理数据的 仓库”。是一个长期存储在计算机内的、有组织的、…...

Docker常规安装简介

总体步骤 搜索镜像拉取镜像查看镜像启动镜像,服务端口映射停止容器移除容器 案例 安装tomcat docker hub上面查找tomcat镜像&#xff0c;docker search tomcat从docker hub上拉取tomcat镜像到本地 docker pull tomcatdocker images查看是否有拉取到的tomcat 使用tomcat镜像创…...

Python - PyQT5 - ui文件转为py文件

在QTdesigner图形化编辑工具中&#xff0c;有些控件我们是可以直接在编辑界面进行编辑的&#xff0c;有些是不可以编辑的&#xff0c;只能通过Python代码进行编辑&#xff0c;不过总体来说&#xff0c;所有能够通过图形化编辑界面可以编辑的&#xff0c;都可以通过Python语言实…...

分布式事务和分布式锁

1、关于分布式锁的了解&#xff1f; 原理&#xff1a;控制分布式系统有序的去对共享资源进行操作&#xff0c;通过互斥来保持一致性。 具备的条件&#xff1a; ①分布式环境下&#xff0c;一个方法在同一时间只能被一个机器的一个线程执行 ②高可用的获取锁和释放锁 ③高性能…...

JAVA-4-[Spring框架]基于XML方式的Bean管理

1 Spring IOC容器 (1)IOC底层原理 (2)IOC接口(BeanFactory) (3)IOC操作Bean管理(基于XML) (4)IOC操作Bean管理(基于注释) 1.1 IOC概念 (1)控制反转(Inversion of Control)&#xff0c;把对象的创建和对象之间的调用过程&#xff0c;交给Spring进行管理。 (2)使用IOC目的&…...

路科验证UVM入门与进阶详解实验0

一.代码编译 首先创建新项目&#xff0c;导入lab0 的UVM文件&#xff1b; 针对uvm_compile文件&#xff0c;先进行编译&#xff1b; module uvm_compile;// NOTE:: it is necessary to import uvm package and macrosimport uvm_pkg::*;include "uvm_macros.svh"in…...

Linux之Shell编程(1)

文章目录前言一、Shell是什么二、Shell脚本的执行方式脚本的常用执行方式三、Shell的变量Shell变量介绍shell变量的定义四、设置环境变量基本语法快速入门五、位置参数变量介绍●基本语法●位置参数变量六、预定义变量基本介绍基本语法七、运算符基本介绍基本语法前言 为什么要…...

Java问题诊断工具——JVisualVM

这篇文章源自一次加班改bug的惨痛经历[,,_,,]:3负责的一个项目占用不断增加&#xff0c;差点搞崩服务器(╥﹏╥)……一下子有点懵&#xff0c;不能立刻确定是哪里导致的问题&#xff0c;所以决定好好研究下这个之前一直被我忽视的问题诊断工具&#x1f527;——JVisualVM嘿嘿我…...

Python3实现简单的车牌检测

导语Hi&#xff0c;好久不见~~~两周没写东西了&#xff0c;从简单的开始&#xff0c;慢慢提高文章水准吧&#xff0c;下一个月开始时间就会比较充裕了~~~利用Python实现简单的车牌检测算法~~~让我们愉快地开始吧~~~相关文件网盘下载链接: https://pan.baidu.com/s/1iJmXCheJoWq…...

基于支持向量机SVM多因子测量误差预测,支持向量机MATLAB代码编程实现

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 SVM应用实例&#xff0c;SVM的测量误差预测 代码 结果分析 展望 支持向量机SVM的详细原理 SVM的定义 支持向量机&#xff08;support vector machines, SVM&#xff09;是一种二分类模型&#xff0c;它的基本模型是定义在特…...

新农具时代,拼多多的进击与本分

这几年&#xff0c;乡村振兴被频频提及&#xff0c;核心就是经济振兴。但经济振兴&#xff0c;不能只靠政府&#xff0c;更要靠企业&#xff0c;政府引导、企业主导才能真正让农民、农村、农业长期受益。企业中&#xff0c;被寄予厚望的是电商企业。甚至&#xff0c;电商成为了…...

质量工具之故障树分析FTA(2) - FTA的基本概念

关键词&#xff1a;问题解决、故障树、故障树分析、FTA、可靠性、鱼骨图、根本原因分析 前文我们已经详细介绍了FTA的历史。 我们在工作中碰到一个问题&#xff0c;可以利用的问题解决工具有很多&#xff0c;故障树分析FTA就是其中之一。 但是FTA毕竟是相对复杂较难掌握的工具…...

《高质量C/C++编程》读书笔记二

文章目录前言三、命名规则四、表达式和基本语句if语句循环语句五、常量前言 这本书是林锐博士写的关于C/C编程规范的一本书&#xff0c;我打算写下一系列读书笔记&#xff0c;当然我并不打算全盘接收这本书中的内容。   良好的编程习惯&#xff0c;规范的编程风格可以提高代码…...

常用的美颜滤镜sdk算法

本文主要介绍常见的美颜滤镜SDK算法&#xff0c;包括 SRGB、 HSL、 Lab、 JPEG、 TIFF等。本文不会过多介绍算法原理&#xff0c;只是列举一些在实际项目中用到的滤镜效果&#xff0c;如&#xff1a; 1.色彩空间变换 2.颜色范围调节 3.色彩平衡调节 4.灰度级调节 5.色相/饱和度…...

动态SQL必知必会

动态SQL必知必会1、什么是动态SQL2、为什么使用动态SQL3、动态SQL的标签4、if 标签-单标签判断5、choose标签-多条件分支判断6、set 标签-修改语句7、foreach标签7.1 批量查询7.2 批量删除7.3 批量添加8、模糊分页查询1、什么是动态SQL 动态 SQL 是 MyBatis 的强大特性之一。如…...

DML编程控制

id生成策略 模型类: Data TableName("tbl_user") public class User {TableId(type IdType.AUTO)TableId(type IdType.NONE)TableId(type IdType.INPUT)TableId(type IdType.ASSIGN_ID)TableId(type IdType.ASSIGN_UUID)private Long id;private String name;T…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...