JavaEE-微服务-Vuex

Vuex

2.1 什么是Vuex

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

  • Vuex在组件之间共享数据。

在这里插入图片描述
2.2 使用 vue cli 构建项目
在这里插入图片描述

2.3 入门案例

2.3.1 定义数据

export default new Vuex.Store({state: { // 状态区域(定义变量区域)user: '',token: ''},mutations: { //修改变量setUser(state, value) {state.user = value},setToken(state, value){state.token = value}},

在这里插入图片描述

2.3.2 调用数据

  • 获得数据:调用state区域,和计算属性结合,使数据可以实时更新
<template><div>{{token}}</div>
</template><script>
export default {computed: { // 计算属性token() {return this.$store.state.token}},
}</script><style>
</style>
  • 设置数据:调用mutations区域
<template><div>{{token}} <br/><input type="button" value="切换数据" @click="setToken('tom')"></div>
</template><script>
export default {computed: { // 计算属性token() {return this.$store.state.token}},methods: {setToken(value) {this.$store.commit('setToken',value)}},
}
</script><style></style>

2.4 总结

属性描述实例
state用于定义对象的状态 (需要共享的数据)
获得方式:
this.$store.state.username
state: {
username: ‘jack’,
password: ‘6666’
}
gettersvuex的计算属性,获得依赖的缓存数据,只有依赖的值发生改变,才重新计算
获得方式:
this.$store.getters.getUsername
getters: {
getUsername(state) {
return state.username
}
}
mutations唯一可以修改对象状态的方式
修改方式
this.$store.commit(‘setUsername’,‘肉丝’)
mutations: {
setUsername(state,value){
state.username = value
}
}
actions可以执行mutations,action运行有异步操作
执行方式:
this.$store.dispatch(‘uesrnameAction’,‘肉丝666’)
actions: { //事件区域
uesrnameAction(context,value){
context.commit(‘setUsername’,value) }
}
modulevuex的模块,允许有独立的以上4个属性

2.5 高级:全局引用(映射)

  • 在vuex中提供一组map用于简化vuex的操作

2.5.1 入门

  • 步骤一:导入对应map
//1 导入需要map
import {mapState} from 'vuex'
  • 步骤二:获得数据
<template><div>{{token}} <br/>{{user}} <br/></div>
</template><script>
//1 导入需要map
import {mapState} from 'vuex'
/*1. mapState() vuex中定义函数2. 通过数组参数,确定从vuex中获得哪些变量的值mapState(['token','user'])此函数返回如下:{token() {return this.$store.state.token},user() {return this.$store.state.user}}3. { { } } 此语法是错误,需要将 mapState函数 返回对象抽取,即只要内容...mapState(['token','user'])返回的内容如下:token() {return this.$store.state.token},user() {return this.$store.state.user}
*/
export default {computed: {...mapState(['token','user'])},
}
</script><style></style>
  • 步骤三:设置数据
<template><div>{{token}} <br/>{{user}} <br/><input type="button" value="切换数据" @click="setToken('tom')"></div>
</template><script>
//1 导入需要map
import {mapState,mapMutations} from 'vuex'
export default {computed: {...mapState(['token','user'])},methods: {...mapMutations(['setToken'])},
}</script><style></style>

2.5.2 完整参考

  • 编写store.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {        //存储数据name : 'jack'},mutations: {      //修改数据changeName(state , value){state.name = value}},actions: {       //触发mutationchangeNameFn(content, value){content.commit("changeName", value);}},getters: {        //获得数据getName: state => state.name,getNameLen : (state, getters) => getters.getName.length}
})
  • About.vue
<template><div class="about"><h1>This is an about page</h1><!-- 1.4 显示改变后的数据 -->{{showName}} <br/><!-- 2.2 显示计算属性映射到的“属性别名” -->{{showName2}} <br/><!-- 3.2 显示计算属性映射到的“默认属性别名” -->{{name}} <br/><input type="text" placeholder="请输入存储的数据" v-model="username" value="" ><br/><input type="button" value="点击切换" @click="nameclick" ></div>
</template><script>import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {data() {return {username : ""     //绑定数据}},methods: {nameclick(){//this.$store.commit("changeName", this.username );  //提交数据,用于修改vuex中的数据//this.$store.dispatch("changeNameFn" , this.username);this.changeName(this.username);  //1.2 执行映射后的新函数 this.changeName()console.info(this.$store.getters.getName)},...mapMutations(['changeName'])   //1.1 将 `this.changeName()` 映射为 `this.$store.commit('changeName')`},computed: {showName(){return this.$store.state.name;   //1.3 显示vuex中的数据,通过“计算属性”实时显示},...mapState({showName2 : state => state.name  //2.1 将 `this.showName2` 映射为 `this.$store.state.name`}),...mapState(['name']) ,        //3.1 将 `this.name` 映射为 `this.$store.state.name`...mapGetters(['getName'])      //4.1 将 `this.getName` 映射为 `this.$store.getters.getName`},}</script>

2.6 流程总结

  • 步骤一:package.json 确定vuex版本 (自动生成)

    "vuex": "^3.0.1"
    

在这里插入图片描述
步骤二:vuex配置文件(src/store.js) (自动生成)

在这里插入图片描述

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {           //数据存储区域},mutations: {         //函数声明区域(修改数据)},actions: {          //事件区域(执行函数)}
})
  • 步骤三:main.js中配置vuex (自动生成)
    在这里插入图片描述

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

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

相关文章

python学习笔记10(循环结构2)

&#xff08;一&#xff09;循环结构2 1、扩展模式 语法&#xff1a; for 循环变量 in 遍历对象&#xff1a; 语句块1 else: 语句块2 说明&#xff1a;else在循环结束后执行&#xff0c;通常和break和continue结合使用 2、无限循环while while 表达式&#xff1a; 语句块…

Ubuntu Desktop 隐藏 / 显示文件和文件夹

Ubuntu Desktop 隐藏 / 显示文件和文件夹 1. GUI hot key2. Show hidden and backup filesReferences 1. GUI hot key Ctrl H: 隐藏 / 显示文件和文件夹 2. Show hidden and backup files Edit -> Preferences -> Views References [1] Yongqiang Cheng, https://yo…

梳理Langchain-Chatchat知识库API接口

一.Langchain-Chatchat 知识库管理 1.Langchain-Chatchat 对话和知识库管理界面 Langchain-Chatchat v0.28 完整的界面截图&#xff0c;如下所示&#xff1a; 2.知识库中源文件和向量库 知识库 test 中源文件和向量库的位置&#xff0c;如下所示&#xff1a; 3.知识库表结构 k…

一夜暴增200城,智驾开城秘诀在哪?小鹏、理想、大疆等各有不同

作者 |Marshall 编辑 |祥威 一夜过后&#xff0c;城市NOA可用范围突然增至两百多城市&#xff0c;这是最近小鹏的智驾给大家的印象。 我们曾在「特斯拉、小鹏开路&#xff0c;城市NOA距好用还有几年&#xff1f;」一文中&#xff0c;探讨了城市NOA落地过程中所面临的地图问题…

vue3-组件基础

什么是组件 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对每个部分进行处理。在实际应用中&#xff0c;组件常常被组织成层层嵌套的树状结构。 定义一个组件 我们一般会将 Vue 组件定义在一个单独的 .vue 文件中&#xff0c;这被叫做单文件组件 (简称…

TypeScript 实用技巧(中)

十四、向类型添加特殊值 原文&#xff1a;exploringjs.com/tackling-ts/ch_special-values.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 14.1 在带内添加特殊值 14.1.1 向类型添加 null 或 undefined 14.1.2 向类型添加符号 14.2 在带外添加特殊值 14.2…

ES查询语法介绍及举例

1. ES查询语法 Elasticsearch&#xff08;ES&#xff09;的查询语法非常强大且灵活&#xff0c;允许执行从简单到复杂的各种搜索操作。ES查询主要基于两种类型&#xff1a;Leaf Query Clauses&#xff08;叶查询子句&#xff09;和Compound Query Clauses&#xff08;复合查询…

Arduino开发实例-NEO-6M GPS模块使用

NEO-6M GPS模块使用 文章目录 NEO-6M GPS模块使用1、硬件准备1.1 NEO-6M GPS模块介绍1.2 硬件接线原理图2、代码实现2.1 GPS数据接收2.2 GPS数据组成2.3 解析GPS数据2.4 在OLED中显示GPS数据本文将展示如何将 NEO-6M GPS 模块与 Arduino 连接。 NEO-6M GPS 模块是一个 GPS 接收…

HJ9 提取不重复的整数【C语言】

【华为机试题 HJ9】提取不重复的整数 描述输入描述:输出描述:示例1参考代码1参考代码2描述 输入一个 int 型整数,按照从右向左的阅读顺序,返回一个不含重复数字的新的整数。 保证输入的整数最后一位不是 0 。 数据范围: 1 ≤ n ≤ 10^8 输入描述: 输入一个int型整数 …

[亲测有效]CentOS7下安装mysql5.7

前言 近期项目需要搭配mysql一起存储相关数据&#xff0c;但对mysql的版本有要求&#xff0c;于是在服务器搭建了mysql5.7&#xff0c;顺便记录一下搭建步骤和踩坑解决步骤。 目录 前言 一、清除旧安装包 二、安装YUM 三、使用yum命令即可完成安装 四、重新设置密码 五、…

美妆-美妆种类

粉底液 作用&#xff1a; 整体肤色提亮&#xff0c;匀称肤色&#xff0c;提升皮肤质感&#xff0c;轻微遮瑕&#xff0c; 中低价位&#xff1a;kate&#xff0c;妙巴黎 遮瑕 作用&#xff1a; 强力遮盖皮肤瑕疵 种类&#xff1a; 遮瑕膏&#xff0c;遮瑕液&#xff0c;遮…

JavaScript总结(三)

今日成果&#xff1a; 27.对象 var xiaoming { name:小明, birth:1990, school:No.1 Middle School, score:null, middle-school:no1.school//不是一个有效变量 }; xiaoming.name;//小明 xiaoming[middle-school];//no1.school xiaoming.age;//undefined…

文心一言 v.s. ChatGPT:多角度对比测评“追赶者”能否超越?

ChatGPT自发布以来就引发了关注热潮&#xff0c;如今国内大模型的发展也是如火如荼、百花齐放&#xff1a;比如百度的文心一言、阿里的通义千问、讯飞的星火大模型等等&#xff0c;那么作为后起之秀的国内大模型与ChatGPT相比哪个更好用呢&#xff1f;“追赶者”能否实现超越&a…

使用Unity创建VisionPro应用

1、下载特定Unity版本 Unity账号需要是Pro账号,普通账号不行,目前只支持这1个Unity版本,不要下载任何其它版本:unityhub://2022.3.11f1/d00248457e15) 其它条件:使用Mac电脑M系列芯片,XCode15 Beta2及以上 参考资料: 苹果官网:苹果官网 Unity官网:Unity官网 官方教程…

Network:use `--host` to expose

前言&#xff1a; 最近开始学习使用vite创建项目&#xff0c;但是 vite 启动后提示&#xff1a;Network:use --host to expose&#xff0c;从而导致在同一个局域网内的其他人也无法访问到我本地的项目。 导致原因&#xff1a;通过官方文档了解到不显示地址是因为IP没有做配置&a…

浏览器无网

目录 1.运行网络诊断&#xff0c;确认原因 原因A.远程计算机或设备将不接受连接(该设备或资源(Web 代理)未设置为接受端口“7890”上的连接 原因B.DNS服务器未响应 场景A.其他的浏览器可以打开网页&#xff0c;自带的Edge却不行 方法A&#xff1a;关闭代理 Google自带翻译…

【江科大】STM32:中断系统(理论)

文章目录 中断系统为什么要使用中断中断优先级中断嵌套STM32的中断系统如何管理这些中断NVIC的结构![请添加图片描述](https://img-blog.csdnimg.cn/c77b038fd63a4ddfbcd3b86f6dfe596b.png) 优先级窗口看门狗&#xff08;WWDG&#xff09;&#xff1a;外部中断模块的特性&#…

《Python数据分析技术栈》第06章使用 Pandas 准备数据 04 DataFrames

04 DataFrames 《Python数据分析技术栈》第06章使用 Pandas 准备数据 04 DataFrames A DataFrame is an extension of a Series. It is a two-dimensional data structure for storing data. While the Series object contains two components - a set of values, and index …

MySQL语句 | FIELD()与ORDER BY()相结合实现对结果的自定义排序

在MySQL中&#xff0c;可将FIELD()与ORDER BY()结合使用&#xff0c;实现对查询结果的自定义规则排序。 举个通用的例子 假设有一个名为your_table的表&#xff0c;包含名为your_column的列&#xff0c;希望按照列your_column的值的特定顺序进行排序&#xff1a; SELECT * F…

从0开始学C++ 第二十八课 数据结构深入 - 栈和队列

第二十八课&#xff1a;数据结构深入 - 栈和队列 学习目标&#xff1a; 理解栈&#xff08;Stack&#xff09;的基本概念和特性。掌握队列&#xff08;Queue&#xff09;的基本概念和特性。学会在C中使用栈和队列。了解栈和队列的典型应用场景。 学习内容&#xff1a; 栈&am…