Vuex的创建和简单使用
Vuex
1.简介
1.1简介
1.框框里面才是Vuex
- state:状态数据
- action:处理异步
- mutations:处理同步,视图可以同步进行渲染

1.2项目创建
1.vue create 名称
2.运行后

3.下载vuex。采用的是基于vue2的版本。
npm install vuex@3 --save
4.vue项目采用的是npm run serve 的运行的方式
1.3配置方式
1.src下创建index.js用于配置store
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)// 创建Vuex对象
const store = new Vuex.Store({//简单数据: 保存的全局状态变量state: {count: 1,app: "Vuex的学习"},// 改变数据mutations: {}
// 导出vuex
export default store
// 如果想使用的话必须去main.js中进行引用
2.main.js设置
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),
store
}).$mount('#app') 1.4获取数据的方式
1.$store.state.名称 获取的是全部的状态变量
2.采用导入的方式
//mapState讲store中的state映射到计算属性
import { mapState } from 'vuex';
需要在计算属性中进行获取store中的数据
- 一种是()中直接写[]
- 可以起别名采用{}的形式
// 计算属性
computed: {
// 写法1
...mapState(
['count', 'app']
),
// 写法2
...mapState({
c: 'count', //相当于给count起了一个别名
a: "app"
}),
}
3.界面展示
<!-- 第一种方式 --><div>
获取store的第一种方式:{{ $store.state.count }}</div><div>
获取store的第二种方式:{{ app }}{{ count }}<br>{{ c }}{{ a }}</div> 4.效果图

2.进阶
直接上代码,简单点用即可
1.store/index.js中导入了一个product的store自定义模块
import Vuex from 'vuex'
import Vue from 'vue'
import product from './product'
Vue.use(Vuex)// 创建Vuex对象
const store = new Vuex.Store({
//简单数据: 保存的全局状态变量
state: {
count: 1,
app: "Vuex的学习"
},
// 改变数据
mutations: { }
, // 复杂数据:当保存的是复杂的数据的时候
// 一个单独的模块,每一个模块中的action,mutation和state都需要全部重新写
modules: {
// 采用模块引入的方式
product,
}
})
// 导出vuex
export default store
// 如果想使用的话必须去main.js中进行引用
2.子模块数据
export default
// product是自定义的命名空间名称
{
namespaced: true,
//全局数据
state: {
list: [1, 2, 3, 4, 5]
}, //同步: 改变数据
mutations: {
addList(state, payload) { //state是当前模块的数据(表示调用的时候传入的参数),payload是参数
state.list.push(payload)
}
},
// 异步:改变数据,不建议
actions: {
addList2(context, payload) { //state是当前模块的数据(表示调用的时候传入的参数),payload是参数
// context.state.list.push(payload) //保存的信息不会被记录下来
context.commit('addList', payload) //可以被追踪到 }
} } 3.界面引用
<template><div><!-- 第一种方式 --><div>
获取store的第一种方式:{{ $store.state.count }}</div><div>
获取store的第二种方式:{{ app }}{{ count }}<br>{{ c }}{{ a }}</div><!-- 获取不同模块中的数据 --><div>
获取不同模块中的数据{{ list }}</div><!--同步 改变状态变量中的数据 --><div><input type="text" @keyup.enter="addClick" placeholder="回车确认信息" v-model="value"></div><!-- 异步 改变状态变量中的数据 --><div><input type="text" @keyup.enter="addClick2" placeholder="回车确认信息" v-model="value2"></div><!-- 异步 改变状态变量中的数据 --><div><input type="text" @keyup.enter="addClick3" placeholder="回车确认信息" v-model="value3"></div></div>
</template><script>
//mapState讲store中的state映射到计算属性
import { mapState } from 'vuex';
// mapMutations将store中的方法映射到methods
import { mapMutations } from 'vuex';
// mapActions把vuex中的actions映射到methods
import { mapActions } from 'vuex';
export default {name: 'helloWorld',// 数据data() {return {value: "",value2: "",value3: ''}},// 方法methods: {...mapMutations('product',//声明的命名空间['addList'] //命名空间store中的方法),...mapActions('product',//声明的命名空间['addList2'] //命名空间store中的方法),//同步:改变数据addClick() {// console.log(this.value); //打印测试信息this.addList(this.value) //直接调用mutation中的方法},//异步:改变数据addClick2() {this.addList2(this.value2)},//直接写addClick3() {//采用/的方式指定命名空间this.$store.commit('product/addList', this.value3)}},// 计算属性computed: {// 写法1...mapState(['count', 'app']),// 写法2...mapState({c: 'count', //相当于给count起了一个别名a: "app"}),// 导入别的模块中的数据...mapState('product', //命名空间名称['list'] //state状态变量中的数据)}
}
</script><style></style>
4.效果图

3.注意点
state中保存的是全局的数据
改变state中的数据推荐使用的是mapMutations,改变的数据会被记录而且界面会时时的刷新和显示
mapActions采用的是异步的方式,不会留下记录的
而且在定义的时候改变数据的方式mutations是state的方式而actions的是context的方式
1.注意点
- 导入
//mapState讲store中的state映射到计算属性
import { mapState } from 'vuex';
// mapMutations将store中的方法映射到methods
import { mapMutations } from 'vuex';
// mapActions把vuex中的actions映射到methods
import { mapActions } from 'vuex';
- 获取
// 计算属性computed: {// 写法1
...mapState(
['count', 'app']),// 写法2
...mapState({c: 'count', //相当于给count起了一个别名a: "app"}),// 导入别的模块中的数据
...mapState('product', //命名空间名称
['list'] //state状态变量中的数据)}// 方法methods: {
...mapMutations('product',//声明的命名空间
['addList'] //命名空间store中的方法),
...mapActions('product',//声明的命名空间
['addList2'] //命名空间store中的方法),
........
} 相关文章:
Vuex的创建和简单使用
Vuex 1.简介 1.1简介 1.框框里面才是Vuex state:状态数据action:处理异步mutations:处理同步,视图可以同步进行渲染1.2项目创建 1.vue create 名称 2.运行后 3.下载vuex。采用的是基于vue2的版本。 npm install vuex3 --save 4.vu…...
Arduino IDE搭建Heltec开发板开发环境
Arduino IDE搭建Heltec开发板开发环境Heltec开发板开发环境下载与搭建Arduino IDE下载与安装搭建Heltec开发板的开发环境添加package URL方法通过Git的方法安装离线安装Heltec开发板开发环境下载与搭建 Arduino IDE下载与安装 Heltec的ESP系列和大部分的LoRa系列开发板都是用A…...
Using the GNU Compiler Collection 目录翻译
文章目录Introduction1 Programming Languages Supported by GCC2 Language Standards Supported by GCC2.1 C Language3 GCC Command Options3.1 Option Summary4 C Implementation-Defined Behavior6 Extensions to the C Language Family9 Binary Compatibility其他工具10 g…...
使用 OpenCV for Android 进行图像特征检测
android 开发人员,可能熟悉使用activities, fragments, intents以及最重要的一系列开源依赖库。但是,注入需要本机功能的依赖关系(如计算机视觉框架)并不像在 gradle 文件中直接添加实现语句那样简单!今天,将专注于使用 OpenCV 库…...
chatGPT笔记
文章目录 一、GPT之技术演进时间线二、chatGPT中的语言模型instructGPT跟传统语言LM模型最大不同点是什么?三、instructGPT跟GPT-3的网络结构是否一样四、GPT和BERT有啥区别五、chatGPT的训练过程是怎样的?六、GPT3在算数方面的能力七、GPT相比于bert的优点是什么八、元学习(…...
这么好的政策和创新基地,年轻人有梦想你就来
周末有空去参观了下一个朋友办的公司。位置和环境真不错,且租金低的离谱,半年租金才2000元,且提供4个工位。这个创新基地真不赖啊,国家鼓励创新创业,助力年轻人实现梦想。场地有办公区,休息区应有尽有&…...
【Kubernetes】【十九】安全认证
第九章 安全认证 本章节主要介绍Kubernetes的安全认证机制。 访问控制概述 Kubernetes作为一个分布式集群的管理工具,保证集群的安全性是其一个重要的任务。所谓的安全性其实就是保证对Kubernetes的各种客户端进行认证和鉴权操作。 客户端 在Kubernetes集群…...
Apache Flink 实时计算在美的多业务场景下的应用与实践
摘要:本文整理自美的集团实时数据负责人、资深数据架构师董奇,在 Flink Forward Asia 2022 主会场的分享。本篇内容主要分为四个部分: 实时生态系统在美的的发展和建设现状 核心传统业务场景 Flink 实时数字化转型实践 新兴业务场景 Flink …...
27 pandas 数据透视
文章目录pivot_table 函数1、index需要聚合的列名,默认情况下聚合所有数据值的列2、values在结果透视的行上进行分组的列名或其它分组键【就是透视表里显示的列】3、columns在结果透视表的列上进行分组的列名或其它分组键4、Aggfunc聚合函数或函数列表(默…...
1.2 学习环境准备
文章目录1.MariaDB简介2.MariaDB服务端和客户端安装1.MariaDB简介 因为MariaDB作为MySQL的延申,其包含MySQL所有的有点,并且其包含了更丰富的特性。比如微秒的支持、线程池、子查询优化、组提交、进度报告等; 所以我们接下来将已MariaDB作为…...
Http1.0协议常识
组织:中国互动出版网(http://www.china-pub.com/)RFC文档中文翻译计划(http://www.china-pub.com/compters/emook/aboutemook.htm)E-mail:ouyangchina-pub.com译者:黄晓东(黄晓东 xd…...
“终于懂了” 系列:组件化框架 ARouter 完全解析(三)AGP/Transform/ASM—动态代码注入
ARouter系列文章: “终于懂了” 系列:组件化框架 ARouter 完全解析(一)原理全解 “终于懂了” 系列:组件化框架 ARouter 完全解析(二)APT—帮助类生成 “终于懂了” 系列:组件化框架…...
传闻腾讯引进Quest 2?我觉得可行性很低
根据36kr最新消息称,腾讯XR团队解散后,确定不碰XR硬件领域,但并未完全放弃XR规划,将转变思路和玩法,业内消息称腾讯计划引进Meta旗下Quest 2 VR一体机。消息称,该计划在2022年11月份XR部门负责人沈黎走后便…...
【数据集】CMIP6气候模式数据下载
1 CMIP6简介 目前,国际耦合模式比较计划(Coupled Model Intercomparison Project, CMIP) 已经发展到第六阶段(CMIP6)。CMIP6模式采用了较以往更加合理的参数化方案,综合考虑了大气中温室气体排放、气溶胶浓度及社会经济、科学技术发展及政府规划等多方面的综合影响,将提…...
华为OD机试 - 最长的元音字符串 | 机试题算法思路 【2023】
最近更新的博客 华为OD机试 - 简易压缩算法(Python) | 机试题算法思路 【2023】 华为OD机试题 - 获取最大软件版本号(JavaScript) 华为OD机试 - 猜字谜(Python) | 机试题+算法思路 【2023】 华为OD机试 - 删除指定目录(Python) | 机试题算法思路 【2023】 华为OD机试 …...
浅谈c++引用
浅谈c 在这里开设 <<浅谈C>> 系列专题,针对C重点内容展开探讨与观察底层,同时也是一个面试专栏,所选知识大多为面试常见问题.前期较为基础,难度会逐渐上升哦~ 本专栏采用经典的哲学三段论编写:是什么|为什么|怎么做 力图精简,高效. 第一章: 浅谈C函数重载 传送门…...
2023什么是分销商城?怎么搭建分销商城
当实体机构都接连探索线上营销模式的时候,分销也随着社交电商的兴起应运而生。 大家好,我是你们熟悉而又陌生的好朋友梦龙,一个创业期的年轻人 它借助裂变效率高的属性,建立更多用户触点,更好的提升企业运营的势能&am…...
408数据结构考点总结
文章目录第一章 绪论考点 1:时间复杂度与空间复杂度时间复杂度空间复杂度第二章 线性表考点 2:顺序表考点 3:单链表第三章 栈和队列考点 4:栈和队列的基本性质考点5:循环队列考点6:双端队列输出受限的双端队…...
虹科分享 | 网络流量监控 | 你的数据能告诉你什么:解读网络可见性的4种数据类型
要了解网络性能问题的原因,可见性是关键。而这四种数据类型(流、数据包、SNMP和API)都在增强网络可见性方面发挥着重要作用。 流 流是通过网络发送的数据的摘要。流类型不同,可以包括NetFlow, sFlow, jFlow和IPFIX。不同的流类型…...
SpringBoot日志框架使用详解
几种常见的日志级别由低到高分为:TRACE < DEBUG < INFO < WARN < ERROR < FATAL 。如何理解这个日志级别呢?很简单,如果项目中的日志级别设置为INFO ,那么比它更低级别的日志信息 就看不到了,即是TRACE…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
