Vuex的使用看这一篇就够了

Vuex概述

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

state状态

把公用的数据放到store里的state就行了，上面是vue2的代码，下面是vue3

import { createStore } from 'vuex'export default createStore({state: {counter:0,title:'标题'},getters: {},mutations: {},actions: {},modules: {},})

访问state里的数据

有两种方法，

1.通过store直接访问

2.通过辅助函数

通过store直接访问

注意，在模板，组件，js模块中的写法是不一样的

这里又可以分成两种方法，二者效果一样

直接用$store.state

<template><nav><p>counter:{{$store.state.counter}}</p><p>{{$store.state.title}}</p><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/>
</template><script>
export default {created() {console.log(this.$store)}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

写个计算属性

补充computed知识点

在 computed 属性中定义的 storeCount 方法被视为一个计算属性，Vue 会自动追踪其依赖。当 this.$store.state.count 的值变化时，storeCount 也会随之更新，从而实现响应式更新。这使得你能够在模板中直接使用 storeCount，而不需要手动管理状态的变化。

简而言之，这种方式利用了 Vue 的响应式特性，确保了数据的同步和更新。

<template><nav><p>counter:{{counter}}</p><p>{{$store.state.title}}</p><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/>
</template><script>
export default {computed:{counter(){return this.$store.state.counter}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

通过辅助函数mapState访问

可以看到上面的方法其实有点麻烦，因为如果要多次访问的话，代码量大，看起来也不整洁。

用法：

详细解释

  1. 导入 mapState：

     
    javascriptCopy Code
     import { mapState } from 'vuex';  
    通过导入 mapState，你可以在组件中使用这个函数。
     
  2.  
    使用 mapState：
     
    javascriptCopy Code
     computed: { ...mapState(['count']) // 直接映射 state 中的 count }  
    • mapState 接受一个字符串数组作为参数，这些字符串是 Vuex store 中 state 的属性名。
    • 这里的 ['count'] 表示你要将 Vuex store 中的 count 状态映射到当前组件的计算属性中。
  3.  
    展开运算符 ...：
     
    • ... 是 ES6 的扩展运算符，它会将 mapState 返回的对象中的属性展开到 computed 中。
    • 这意味着 mapState(['count']) 会返回一个对象，例如 { count() { return this.$store.state.count; } }，而展开运算符会将这个对象中的 count 方法直接添加到 computed 中。
  4.  
    结果：
     
    • 最终，组件中就可以通过 {{ count }} 来直接使用 Vuex store 中的 count 状态了。由于计算属性的响应式特性，当 Vuex 中的 count 发生变化时，组件会自动重新渲染。
 

 

 

 

试一下
 

<template><nav><p>{{ counter }}</p><p>{{ title }}</p><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/>
</template><script>
import { mapState } from 'vuex';
export default {computed: {...mapState(['counter','title'])},
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

 

 

 

 

 

 

 

 

 

 

修改store里的数据
 

 

Mutations介绍
 

通过mutations可以提供修改数据的方法
 

 

 

注意！mutation的第一个参数都是state。而且最多只能有两个参数，如果想实现多个参数，那第二个参数就要包装成对象
 

 

在store中定义 Mutation
 

import { createStore } from 'vuex'export default createStore({state: {count:0,title:'标题'},getters: {},mutations: {add(state,n){state.count+=n}},actions: {},modules: {},})

 

 

 

要调用 mutation，需要使用 store.commit 方法
 

<template><nav><p>{{ count }}</p><p>{{ title }}</p><button @click="add">增加</button></nav>
<!--  <router-view/>-->
</template><script>
import { mapState } from 'vuex';
export default {computed: {...mapState(['count','title'])},methods:{add(){this.$store.commit('add',3)}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

 

 

 

 

 

 

 

 

第二个参数要包装成对象的用法
 

 
add(state,obj){
       state.count+=obj.n
       console.log(obj.msg)
     }
 

 

import { createStore } from 'vuex'export default createStore({state: {count:0,title:'标题'},getters: {},mutations: {add(state,obj){state.count+=obj.nconsole.log(obj.msg)}},actions: {},modules: {},})

 

 

 

 

 

 

 
 add(){
         this.$store.commit('add',{
           n:3,msg:'哈哈'
         })
       }
 

 

  <template><nav><p>{{ count }}</p><p>{{ title }}</p><button @click="add">增加</button></nav><!--  <router-view/>--></template><script>import { mapState } from 'vuex';export default {computed: {...mapState(['count','title'])},methods:{add(){this.$store.commit('add',{n:3,msg:'哈哈'})}}}</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}nav {padding: 30px;}nav a {font-weight: bold;color: #2c3e50;}nav a.router-link-exact-active {color: #42b983;}</style>

 

 

 

 

 

 

 

 

练习
 

 

 

 

不能使用v-model双向绑定的方法。任何要修改仓库（store）里的数据，都要用mutation进行提交。
 

 

 

 

 

 

mapMutations介绍
 

 

 

 

mapMutations 是 Vuex 提供的一个辅助函数，用于简化组件中调用 mutations 的过程。它可以将 store 中的 mutation 映射为组件的方法，使得调用更简洁。
 

使用方法
 

 
  1.  
    导入 mapMutations：
     import { mapMutations } from 'vuex';
  2.  
    在组件中使用：
     
    在组件的 methods 中使用 mapMutations 来映射 mutations。例如：
     
 
export default {methods: {...mapMutations(['increment', 'decrement']),// 你也可以指定方法名称...mapMutations({add: 'increment', // 将 store 中的 increment 映射为组件的方法 add})}
}
 
 

 

 

 

 

  <template><nav><p>{{ count }}</p><p>{{ title }}</p><button @click="add({n:2,msg:'增加'})">增加</button></nav><!--  <router-view/>--></template><script>import { mapState,mapMutations } from 'vuex';export default {computed: {...mapState(['count','title'])},methods:{...mapMutations(['add'])}}</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}nav {padding: 30px;}nav a {font-weight: bold;color: #2c3e50;}nav a.router-link-exact-active {color: #42b983;}</style>

 

 

 

 

 

 

 

 

 

mapActions
 

 

 

 

这边就主要介绍辅助函数mapAction了
 

 

 

 

 

 

  <template><nav><p>{{ count }}</p><p>{{ title }}</p><button @click="add(5)">增加</button><button @click="change">延迟增加</button></nav><!--  <router-view/>--></template><script>import { mapState,mapMutations,mapActions } from 'vuex';export default {computed: {...mapState(['count','title'])},methods:{...mapMutations(['add']),...mapActions(['change'])}}</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}nav {padding: 30px;}nav a {font-weight: bold;color: #2c3e50;}nav a.router-link-exact-active {color: #42b983;}</style>

 

 

import { createStore } from 'vuex'export default createStore({state: {count:0,title:'标题'},getters: {},mutations: {add(state,n){state.count+=n}},actions: {change(context,num){setTimeout(()=>{context.state.count+=10},1000)}},modules: {},})

 

 

 

 

 

 

 

mapGetter
 

 

 

注意！
 

 
1.getters函数的第一个参数是state
 
2.必须要有返回值
 

 

 

 

 

  <template><nav><p>{{ count }}</p><p>{{ title }}</p><button @click="add(5)">增加</button><button @click="change">延迟增加</button><div><p>mapGetter函数:</p>{{filterList}}</div></nav><!--  <router-view/>--></template><script>import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';export default {computed: {...mapState(['count','title']),...mapGetters(['filterList'])},methods:{...mapMutations(['add']),...mapActions(['change'])}}</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}nav {padding: 30px;}nav a {font-weight: bold;color: #2c3e50;}nav a.router-link-exact-active {color: #42b983;}</style>

 

import { createStore } from 'vuex'export default createStore({state: {count:0,title:'标题',list:[1,2,3,4,5,6,7,8]},getters: {filterList(state){return state.list.filter(i=>i>4)}},mutations: {add(state,n){state.count+=n}},actions: {change(context,num){setTimeout(()=>{context.state.count+=10},1000)}},modules: {},})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 












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


如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！












相关文章










[大语言模型] LINFUSION：1个GPU，1分钟，16K图像








[大语言模型] LINFUSION：1个GPU，1分钟，16K图像




1. 文章 2409.02097 (arxiv.org)https://arxiv.org/pdf/2409.02097 
LINFUSION: 1 GPU, 1 MINUTE, 16K IMAGE 
摘要 
本文介绍了一种新型的扩散模型LINFUSION&#xff0c;它能够在保持高分辨率图像生成性能的同时显著降低时间和内存复杂度。该模型采用了基于Transformer的UNet进…




阅读更多...

















【前端】ES6：Class语法和Class继承








【前端】ES6：Class语法和Class继承




文章目录 1 Class语法1.1 类的写法1.2 getter与setter1.3 静态属性和静态方法 2 Class继承 1 Class语法 
1.1 类的写法 
class Person {constructor(name,age){this.name  name;this.age  age;}say(){console.log(this.name,this.age)}
}
let obj  new Person("kerwin&quo…




阅读更多...

















python--基础语法（2）








python--基础语法（2）




1.顺序语句 
默认情况下&#xff0c;Python的代码执行顺序是按照从上到下的顺序&#xff0c;依次执行的。 
2.条件语句 
条件语句能够表达“如果 ...否则 ...”这样的语义这构成了计算机中基础的逻辑判定条件语&#xff0c; 也叫做 分支语句。表示了接下来的逻辑可能有几种走向…




阅读更多...

















SysML图例-10cm最小航天器AC-10








SysML图例-10cm最小航天器AC-10




DDD领域驱动设计批评文集>> 
《软件方法》强化自测题集>> 
《软件方法》各章合集>> 
SysML图中词汇 
AC10 AeroCube-10&#xff0c;大小仅为10 10 15 cm的卫星&#xff0c;更多信息参见下文&#xff1a; 
AeroCube-10成为迄今为止完成在轨接近操作的最小航天…




阅读更多...

















yolov8模型在手部关键点检测识别中的应用【代码+数据集+python环境+GUI系统】








yolov8模型在手部关键点检测识别中的应用【代码+数据集+python环境+GUI系统】




yolov8模型在手部关键点检测识别中的应用【代码数据集python环境GUI系统】 背景意义 
在手势识别、虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;等领域&#xff0c;手部关键点检测为用户提供了更加自然、直观的交互方式。通过检测手部关键点&#…




阅读更多...

















移动登录页：让用户开启一段美好的旅程吧。








移动登录页：让用户开启一段美好的旅程吧。




Hi,大家好&#xff0c;我是大千UI工场&#xff0c;移动登录页千千万&#xff0c;这里最好看&#xff0c;本期分享一批移动端的登录页面&#xff0c;供大家欣赏。 
本次分享的是毛玻璃/3D风格的登录页。




阅读更多...

















Linux文件IO（七）-复制文件描述符








Linux文件IO（七）-复制文件描述符




在 Linux 系统中&#xff0c;open 返回得到的文件描述符 fd 可以进行复制&#xff0c;复制成功之后可以得到一个新的文件描述符&#xff0c;使用新的文件描述符和旧的文件描述符都可以对文件进行 IO 操作&#xff0c;复制得到的文件描述符和旧的文件描述符拥有相同的权限&#…




阅读更多...

















【文化课学习笔记】【化学】选必三：合成高分子生物大分子








【文化课学习笔记】【化学】选必三：合成高分子生物大分子




【化学】选必三&#xff1a;合成高分子&生物大分子 如果你是从 B 站一化儿笔记区来的&#xff0c;请先阅读我在第一篇有机化学笔记中的「读前须知」(点开头的黑色小三角展开)&#xff1a;链接 加聚反应 基本概念 聚合反应 由小分子化合物合成高分子化合物的反应叫聚合反应。…




阅读更多...

















学习 git 命令行的简单操作, 能够将代码上传到 Gitee 上








学习 git 命令行的简单操作, 能够将代码上传到 Gitee 上




首先登录自己的gitee并创建好仓库 
将仓库与Linux终端做链接 
比如说我这里已经创建好了一个我的Linux学习仓库 点开克隆/下载&#xff1a; 在你的终端中粘贴上图中1中的指令 
此时他会让你输入你的用户名和密码&#xff0c;用户名就是上图中3中Username for ....中后面你的一个…




阅读更多...

















秒变 Vim 高手：必学的编辑技巧与隐藏功能大揭秘








秒变 Vim 高手：必学的编辑技巧与隐藏功能大揭秘




文章目录 前言一、vi与vim二、Vim的三种模式1. 普通模式2. 插入模式3. 命令模式 三、Vim中的查找与替换1. 查找2. 替换 四、给Vim设置行号1. 临时显示行号2. 永久显示行号 总结 前言 
在Linux系统中&#xff0c;文本编辑器是开发者和系统管理员日常工作中的重要工具之一。其中&…




阅读更多...

















手机号归属地查询-运营商归属地查询-手机号归属地信息-运营商手机号归属地查询接口-手机号归属地








手机号归属地查询-运营商归属地查询-手机号归属地信息-运营商手机号归属地查询接口-手机号归属地




手机号归属地查询接口是一种网络服务接口&#xff0c;它允许开发者通过编程方式查询手机号码的注册地信息。这种接口通常由第三方服务提供商提供&#xff0c;并可通过HTTP请求进行调用。以下是一些关于手机号归属地查询接口的相关信息&#xff1a; 
1. 接口功能 
归属地查询&am…




阅读更多...

















HTB-GreenHorn 靶机笔记








HTB-GreenHorn 靶机笔记




GreenHorn 靶机笔记 
概述 
GreenHorn 是 HTB 上的一个 linux easy 难度的靶机&#xff0c;主要是通过信息搜集和代码审计找到对我们有用的信息。其中还包含了对pdf文件的修复技术 
靶机地址&#xff1a;https://app.hackthebox.com/machines/GreenHorn 
一丶 nmap 扫描 
1&…




阅读更多...

















https加密原理








https加密原理




以为http的数据都是以明文传送&#xff0c;会有很大的安全问题&#xff0c;所以出现的https协议。https就是在http协议的基础上增加了一个安全层&#xff0c;可以对数据进行加密和解密(例如SSL、TLS等)。 
https加密解密的原理&#xff1a;证书非对称加密对称加密 
在讲解原理前…




阅读更多...

















用友网络交付总监刘伟伟受邀为第四届中国项目经理大会演讲嘉宾








用友网络交付总监刘伟伟受邀为第四届中国项目经理大会演讲嘉宾




全国项目经理专业人士年度盛会 用友网络科技股份有限公司区域交付总监刘伟伟先生受邀为PMO评论主办的全国项目经理专业人士年度盛会——2024第四届中国项目经理大会演讲嘉宾&#xff0c;演讲议题为“如何有效提升项目经理领导力”。大会将于10月26-27日在北京举办&#xff0c;主…




阅读更多...

















蓝桥杯模块一：LED指示灯的基本控制








蓝桥杯模块一：LED指示灯的基本控制




模块训练一:LED指示灯的基本控制 模块1到模块13都是通过I\O模式进行设计 一、电路图 二、电路分析 
1.74HC573锁存器介绍 
OE端接地&#xff0c;上电即工作&#xff0c;控制LE端&#xff0c;当LE端接高电平时&#xff0c;锁存器开始工作&#xff0c;接通D和Q 2.电路工作原理分析…




阅读更多...

















文件操作和InputStream,OutputStream的用法








文件操作和InputStream,OutputStream的用法




“他越拧巴&#xff0c;我越喜欢&#xff01;” 文件&#xff1a;  
此处谈到的文件&#xff0c;本身有很多的含义。 
狭义上的文件&#xff0c;特指 硬盘上的文件&#xff08;以及保存文件的目录&#xff09;。 
广义上的文件&#xff0c;计算机上的很多硬件设备&#xff0c;软…




阅读更多...

















pick你的第一个人形机器人——青龙强化学习环境测试








pick你的第一个人形机器人——青龙强化学习环境测试




文章目录 一、环境配置二、开始训练三、训练成果 最近感受到的大趋势是具身智能&#xff0c;强化学习&#xff0c;模仿学习做人形机器人&#xff0c;这个赛道很火&#xff0c;颇有前些年全力投入做自动驾驶的架势&#xff0c;正好最近用强化学习解决POMDP问题接触到了强化学习&…




阅读更多...

















怎么检查cuda是否安装成功（以及查看cuda的安装位置）








怎么检查cuda是否安装成功（以及查看cuda的安装位置）




方法一&#xff1a; 
winr&#xff0c;再cmd&#xff0c;再在命令行中输入 nvcc -V 可以查看版本信息  方法二&#xff1a; winr&#xff0c;再cmd&#xff0c;再在命令行中输入 nvidia-smi 可以查看版本信息 方法三&#xff1a; 使用python,pytorch代码 
import torch # 如果p…




阅读更多...

















Unet改进42：添加ACConv2d|使用一维非对称卷积来增强平方卷积核








Unet改进42：添加ACConv2d|使用一维非对称卷积来增强平方卷积核




本文内容：在不同位置添加ACConv2d 目录 
论文简介 
1.步骤一 
2.步骤二 
3.步骤三 
4.步骤四 论文简介 由于在给定的应用环境中设计合适的卷积神经网络(CNN)架构通常需要大量的人工工作或大量的GPU时间，研究社区正在征求架构中立的CNN结构，它可以很容易地插入到多个成熟的架…




阅读更多...

















C++：数组与字符串








C++：数组与字符串




一、数组 数组是一种存储若干元素的数据类型&#xff0c;在诸多编程语言中存在&#xff0c;其显著的特点是元素通常是在物理层面上连续存储的&#xff08;逻辑上的数组&#xff0c;比如链表&#xff0c;可能不是&#xff09;&#xff0c;并且具有极快的元素访问速度。 数组通常…




阅读更多...





























最新文章






























Copyright @ 2022~2023