vuex

1.概述

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享

优点:

  • 能够在vuex中集中管理共享的数据,便于开发和后期进行维护
  • 能够高效的实现组件之间的数据共享,提高开发效率
  • 存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新

2.Vuex的基本使用步骤

  1. 安装 npm i vuex --save

  2. 在src文件目录下新建store>index.js文件

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const store = new Vuex.Store();export default store;
    
  3. 入口文件里面引入store,然后再全局注入

    import store from './store'//引入storenew Vue({el: '#app',router,store,//使用storetemplate: '<App/>',components: { App }
    })
    
  4. 使用
    4.1 在state中定义数据

    Vue.use(Vuex)
    const store = new Vuex.Store({state:{count:1}
    })
    

    4.2 Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,Getters 可以用于监听、state中的值的变化,返回计算后的结果

     getters:{getCount:state=>{return state.count+1}
    

    4.3 给action注册事件处理函数,当这个函数被触发时候,将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参

    actions:{addFun(context,n){context.commit('add',n)}removeFun(context){context.commit("remove")}}
    

    4.4 mutations是一个对象里。面的方法 都是同步事务,是更改state初始状态的唯一合法方法,具体的用法就是给里面的方法传入参数state或额外的参数

    mutations:{add(state,n){state.count = state.count+n},remove(){state.count=state.count-1}},
    

    4.5 dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘action方法名’,值)
    commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)

    export defult{data(){return{mag:'aaa'}},methods:{addCount(){this.$store.commit('add')},reoveCount:function(){this.$store.commit('remove')},addFun(){let n =2;this.$store.dispatch('addFun',n)},removeFun(){this.$store.dispatch('removeFun')}}
    }
    

3. Vuex中的核心特性

3.1 State

概述:
State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储

在组件中访问State的方式:
方式一:

this.$store.state.全局数据名称  如:this.$store.state.count

方式二:

先按需导入mapState函数: import { mapState } from 'vuex'
然后数据映射为计算属性: computed:{ ...mapState(['全局数据名称']) }

3.2. Mutation

概述:
Mutation用于修改变更$store中的数据

使用方式第一种:
打开store.js文件,在mutations中添加代码如下

mutations: {add(state,step){//第一个形参永远都是state也就是$state对象//第二个形参是调用add时传递的参数state.count+=step;}}

然后在Addition.vue中给按钮添加事件代码如下:

<button @click="Add">+1</button>methods:{Add(){//使用commit函数调用mutations中的对应函数,//第一个参数就是我们要调用的mutations中的函数名//第二个参数就是传递给add函数的参数this.$store.commit('add',10)}
}

使用mutations的第二种方式:

import { mapMutations } from 'vuex'methods:{...mapMutations(['add'])
}
import { mapState,mapMutations } from 'vuex'export default {data() {return {}},methods:{//获得mapMutations映射的sub函数...mapMutations(['sub']),//当点击按钮时触发Sub函数Sub(){//调用sub函数完成对数据的操作this.sub(10);}},computed:{...mapState(['count'])}
}

3.3 Action

概述:
在mutations中不能编写异步的代码,会导致vue调试器的显示出错。
在vuex中我们可以使用Action来执行异步操作。

操作步骤如下:
打开store.js文件,修改Action,如下:

actions: {addAsync(context,step){setTimeout(()=>{context.commit('add',step);},2000)}
}

然后在Addition.vue中给按钮添加事件代码如下

<button @click="AddAsync">...+1</button>methods:{AddAsync(){this.$store.dispatch('addAsync',5)}
}

第二种方式:

import { mapActions } from 'vuex'methods:{...mapMutations(['subAsync'])
}
import { mapState,mapMutations,mapActions } from 'vuex'export default {data() {return {}},methods:{//获得mapMutations映射的sub函数...mapMutations(['sub']),//当点击按钮时触发Sub函数Sub(){//调用sub函数完成对数据的操作this.sub(10);},//获得mapActions映射的addAsync函数...mapActions(['subAsync']),asyncSub(){this.subAsync(5);}},computed:{...mapState(['count'])}
}

3.4 Getter

概述:
Getter用于对Store中的数据进行加工处理形成新的数据
它只会包装Store中保存的数据,并不会修改Store中保存的数据,当Store中的数据发生变化时,Getter生成的内容也会随之变化

打开store.js文件,添加getters,如下:

export default new Vuex.Store({.......getters:{//添加了一个showNum的属性showNum : state =>{return '最新的count值为:'+state.count;}}
})

然后打开Addition.vue中,添加插值表达式使用getters

或者也可以在Addition.vue中,导入mapGetters,并将之映射为计算属性

import { mapGetters } from 'vuex'
computed:{...mapGetters(['showNum'])
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/807772.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

流媒体的安全谁来保障

流媒体的安全谁来保障 说起媒体&#xff0c;我们马上就会想到报纸新闻、广播、电视。 其实所谓的流媒体同我们通常所指的媒体是不一样的&#xff0c; 它只是一个技术名词。流媒体到底是什么&#xff1f;能给我们的生活带来什么&#xff1f;跟小德一起来看看。 流媒体是什么&a…

大数据基本名词

目录[-] 1.1. 1. Hadoop1.2. 2. Hive1.3. 3. Impala1.4. 4. Hbase1.5. 5.hadoop hive impala hbase关系1.6. 6. Spark1.7. 7. Flink1.8. 8. Spark 和 Flink 的应用场景 1. Hadoop 开源官网&#xff1a;https://hadoop.apache.org/ Hadoop是一个由Apache基金会所开发的分…

使用Android完成案例教学

目录 题目&#xff1a;完成在Android平台下2个玩家分别利用2个手机连接在同一局域网下通过滑动摇杆分别使红飞机和黄飞机移动的开发。&#xff08;全代码解析&#xff09; 题目&#xff1a;完成在Android平台下2个玩家分别利用2个手机连接在同一局域网下通过滑动摇杆分别使红飞…

MongoDB聚合运算符:$max

文章目录 语法使用空值和缺失值的处理数组操作数的处理 举例在$group阶段使用在$setWindowFields阶段使用在$project阶段使用 $max聚合运算符用于返回最大值。 $max对于不同的类型的值使用BSON的比较顺序。 $max可以用于下面的这些阶段&#xff1a; $addFields$bucket$bucket…

解决unbuntu更新到23.10 mantic firefox无法使用的问题

产看历史版本号&#xff1a; 升级到最新版本后查看&#xff1a; roottesthost01:/home/test/Desktop# lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 23.10 Release: 23.10 Codename: mantic 打开firefox发现图标找…

【教程】四种方法将App打包为IPA文件类型

摘要 本教程总结了将App应用程序打包为IPA包的四种常用方法&#xff0c;包括Apple推荐的方式、iTunes拖入方法、自动编译脚本和解压改后缀名方法。每种方法都有其特点和适用场景&#xff0c;在实际开发中可以根据需求选择合适的方式进行打包。通过本教程&#xff0c;您将了解到…

mapper.xml特殊SQL语句汇总(持续更新中)

1.通用查询结果列 <sql id"Base_Column_List">user_id, user_name, user_password </sql>用法&#xff1a; <select id"selectUser" resultType"com.example.YourUser">SELECT<include refid"Base_Column_List"…

HTML2:列表和表格

列表 有序列表 ordered list ol 无序列表 unordered list ul 定义列表 definition list dl 1,有序列表 每条列表前自带一个序号 2,无序列表 每条列表前自带一个小圆点 3,定义列表 注意:dl中放的不是li列表而是dt列表和dd表项 dt代表术语标题 dd代表术语内容 一个…

服务器出现404错误怎么处理

很多站长使用虚拟主机或者云服务器做网站的以为这个就是空间商的问题&#xff0c;空间商主要服务虚拟主机的运维&#xff0c;跟404出现错误 并不完全直接关联的&#xff0c; 也是关于多方面的问题存在的&#xff0c; 现在由壹基比小鑫来给大家讲解下&#xff1a; 1.错误原因 HT…

从零开始学Spring Boot系列-集成MyBatis-Plus

在Spring Boot应用开发中&#xff0c;MyBatis-Plus是一个强大且易于使用的MyBatis增强工具&#xff0c;它提供了很多实用的功能&#xff0c;如代码生成器、条件构造器、分页插件等&#xff0c;极大地简化了MyBatis的使用和配置。本篇文章将指导大家如何在Spring Boot项目中集成…

【C语言】函数递归编程题

目录 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 总结 题目一&#xff1a; 题目&#xff1a;接受一个整型值&#xff08;无符号&#xff09;&#xff0c;按照顺序打印它的每一位。&#xff08;递归完成&#xff09; 列如&#xff1a; …

2024.3.30力扣每日一题——需要添加的硬币的最小数量

2024.3.30 题目来源我的题解方法一 数学贪心 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2952 我的题解 方法一 数学贪心 首先将数组 coins按升序排序&#xff0c;然后计算需要添加的硬币的最小数量。 关键&#xff1a;对于正整数 x&#xff0c;如果区间 [1,x−1] 内…

Vue3入门大全(持续更新)

什么是Vue3 Vue.js 是一款流行的 JavaScript 前端框架&#xff0c;用于构建交互式的 Web 用户界面。Vue 3 是 Vue.js 的下一个主要版本&#xff0c;是对 Vue 2 的重大更新。Vue 3 在性能、开发体验和扩展性等方面都进行了改进和优化&#xff0c;其中一些重要的变化和功能包括&…

通过 CLI 和引入的方式使用 React:基础入门

使用React 有两种使用方式&#xff0c;主要有以下几个原因: 灵活性和适应性: 引入的方式可以让开发者在现有的 HTML 页面中快速引入 React,无需设置完整的项目环境。这适合小型或原型项目。 CLI 方式则更适合用于构建大型复杂的 React 应用程序,因为它提供了更完整的项目结构和…

探索 ChatGPT:解读 AI 对话的魔力(文末推荐一款AI工具聚合平台,可免费体验)

&#x1f947;作者简介&#xff1a;CSDN内容合伙人、新星计划第三季Python赛道Top1 &#x1f525;个人主页&#xff1a;hacker707的csdn博客 &#x1f4ac;推荐一款AI工具聚合平台&#x1f449;Hulu AI 探索 ChatGPT&#xff1a;解读 AI 对话的魔力 ChatGPT 的魅力如何使用 C…

JVM修炼之路【10】- 垃圾回收器和垃圾回收算法

垃圾回收算法 我们先简要看一下 四种主要的垃圾回收算法 看到这不禁感慨一下 人家1960年 都搞出GC算法了 太强了 评价标准 既然有这么多算法 那就跟各个牌子的游戏本一样 有个比较&#xff0c;这里我们重点介绍一下 垃圾回收算法的评价标准 这几个标准非常重要是 是后面理解很…

springCloudAlibaba集成sentinel实战(超详细)

一、Sentinel介绍 1. 什么是Sentinel Sentinel是阿里开源的项目&#xff0c;提供了流量控制、熔断降级、系统负载保护等多个维度来保障服务之间的稳定性。 分布式系统的流量防卫兵&#xff1a; 随着微服务的普及&#xff0c;服务调用的稳定性变得越来越重要。Sentinel以“流…

你知道 Java 线程池的原理吗?

Java线程池是用于管理和复用线程的机制&#xff0c;它可以帮助开发者有效地管理线程的生命周期和资源&#xff0c;并提高应用程序的性能和稳定性。 1. 线程池概述 在计算机科学中&#xff0c;线程池是一种可用来执行异步任务的线程队列。它主要包含以下几个组成部分&#xff…

python连接mysql数据库并将dataframe的数据插入表中

代码中连接的sql表为"20230411_hangzhuanlie"&#xff0c;表结构如下&#xff1a; 代码如下&#xff08;按需修改用户名、库名等即可&#xff09;&#xff1a; import pymysql import pandas as pd from sqlalchemy import create_enginehost 127.0.0.1:3306/ user_…

科研学习|论文解读——基于旅游知识图谱的游客偏好挖掘和决策支持(IPM,2023)

原文题目 Mining tourist preferences and decision support via tourism-oriented knowledge graph 摘要 目前,旅游管理研究的重点是通过对异构用户生成的内容进行广泛分析,来理解旅游偏好的波动,制定有针对性的发展策略。然而,鉴于在线景点评论涉及过多的混合和无形维度…