热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vuex的实战使用详解

这篇文章主要介绍了Vuex的实战使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

写在前面

我是一个看技术的文档不喜欢官方的人,觉得官方写的任何东西都是比较正式的,让人有点不想看的赶脚,我这里也不贴官方的那个图了,这里也不解释了(其实是我也不想研究)所以我一般都是百度一些别人的经验之谈,看别人的经验之谈可以让你少踩一些坑,而且是可以直接看到效果的,所以这里也是,我们不按照官方的来,那么有利有弊,利就是好理解,弊就是可能写的不够专业,会让一些人误会,总之我权衡之后还是选择看着官方的一些东西然后结合自己的使用来说一下怎么玩这个vuex的。说实话我开始使用的时候觉得这个东西还是很好的,毕竟结合自己的需求,如果您的项目一直没有用到这个的地方可能体会不到,这里就开始写玩法。

什么是vuex

说白了就是一个可以全局管理状态的东西,用官方的话说是它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,说人话就是可以时刻监听一个值的状态改变,同时项目里面别的组件也可以使用这个变量。做出相应的处理。

安装

这个是万年不变的,没什么好说的。直接在项目里面运行下面这行代码

1
npm install vuex --save

我的业务场景

首先说一下业务场景,不然看代码是没有意义的,毕竟代码是为了解决业务的问题,我的业务是需要做一个机器的管理项目,那么这个机器有很多台,例如机器1、机器2等,那么想管理就需要将所有的机器先拿到,然后根据需要切换想设置的机器,view显示对应的机器的配置信息,需求是很明确的,我语言表达能力不行,直接看图。

这里简单的解释一下,有人说,这个不是很简单嘛,直接将切换的函数写到select的控件里面,直接点击切换的函数的时候直接给后端对应的uuid,拿到值就可以了,是的,如果只有这一个页面是可以的,但是仔细看布局,select组件是在一个公共组件里面的,你选择的时候你的uuid是不可以直接给到当前页面的,即时给到他,别的配置怎么办呢?而且我们要做的是切换的时候直接整个项目里面的uuid全部改掉,然后重新渲染整个数据,才是合理的解决方案。说一下我开始的想法,我开始是准备使用缓存做,每次用户切换的时候我都将最新的uuid放到缓存里面,但是有一个问题解决不了就是在别的页面怎么实时监听这个值改变了呢?所以,使用vuex是一个比较合理的解决方案,看代码

使用

新建一个store.js

引入

  • 在store.js里面直接将下面的代码复制到里面
  • 声明一个您需要监听的变量(store.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * created by ClearLove
 * @aim 标题栏中需要更改自助机的uuid,所有的返回值都需要是该自助机下的数据,所以需要声明一个全局的可以监听uuid的变化
 * @params machine_uuid_flag 全局uuid
 */
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
 
const state = {
 machine_uuid_flag: '', //机器uuid
}
 
const getters = {
 getters_mac_uuid() {
  return state.machine_uuid_flag
 }
};
const mutatiOns= {
 mutations_mac_uuid(state, mac_uuid) {
  state.machine_uuid_flag = mac_uuid
 }
};
const actiOns= {
 actions_mac_uuid(state, mac_uuid) {
  state.commit('mutations_mac_uuid', mac_uuid)
 }
};
 
export default new Vuex.Store({
 state,
 getters,
 mutations,
 actions
})

页面使用

首先我们子啊公共组件也就是展示select组件的地方将切换事件处理一下

1
2
3
4
5
6
7
8
9
/**
 * @change_machine 更改自助机
 */
change_machine(machine_mac_uuid) {
 this.machine_id = machine_mac_uuid;
 // 这里是将最新的更换的机器的uuid,将store里面的uuid更换掉,这样才可以保证别的地方使用这个uuid的地方也会同时改变
 this.$store.dispatch('actions_mac_uuid',machine_mac_uuid);
 sessionStorage.setItem('machine_mac_uuid', this.machine_id)
},

把引入组件的代码也贴上来吧,这样好理解


       
       

这个时候下面的页面怎么接收这个值做出相应的改变呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
created: function () {
 this.machine_mac_uuid = sessionStorage.getItem('machine_mac_uuid');
 this.machine_name = sessionStorage.getItem('machine_name');
 //将最新的uuid拿到
 this.update_mac_uuid = this.$store.state.machine_uuid_flag;
 this.get_settings_info()
},
/**
 * 接收store的改变的值
 */
computed:{
 machine_uuid_flag(){
  //将接收到的最新的uuid return出去
  return this.$store.state.machine_uuid_flag
 }
},
/**
 * 监听该store里面值的变化
 */
watch: {
 //监听这个值是不是接收到,改变的话直接重新执行获取机器的方法
 machine_uuid_flag: function (newvalue , oldvalue) {
  this.update_mac_uuid = newvalue; //将最新的值传递给更新的对象
  this.get_settings_info();
 }
},
methods: {
 /**
  * @get_settings_info 获取某一台自助机的详情
  */
 get_settings_info() {
  this.$axios({
   method: 'post',
   url: this.api.api_zzj_9006 + 'manager_back/get_main_info/',
   data: {
    machine_uuid: this.update_mac_uuid ? this.update_mac_uuid : this.machine_mac_uuid
   }
  }).then((res) => {
   let machine = res.data.data;
   this.machine_name = machine.machine_name;
   this.machine_mac_uuid = machine.machine_mac_uuid;
   this.location = machine.location;
   this.mac_uuid = machine.mac_uuid;
   this.machine_uuid = machine.machine_uuid;
   this.mac_uuid_two = machine.mac_uuid_two;
   this.expire_data = machine.expire_data;
   this.environmental_state_dec = machine.environmental_state_dec;
   this.machine_type_des = machine.machine_type_des;
   this.system_version = machine.system_version;
  }).catch((err) => {
   console.error(err)
  })
 }
},

我在想你们是不是心里一万句cnm飘过,写那么多做什么?装逼吗?其实不是的,是我在看别人的博客的时候发现一个问题,就是很多人贴代码的时候因为贴的是一部分,导致很多人摸不着头脑,也不知道每一个方法是怎么传递的,我不想我的博客别人看了以后也有这样的疑问,所以才整个直接贴出来,当然我会做出详细的解释,。

解释一下上面的代码:首先我们在页面加载的时候也就是created的阶段将最新的uuid也就是store里面的全局变量的值拿到,有人说你拿到, 为什么还要写下面的,那么问题就来了,如果用户在当前页面直接切换了机器的uuid,那么他没有刷新页面,也没有切换页面,这个时候created是不会执行的,是不是,那么最新的uuid怎么更新呢?你即使监听了但是由于createrd不执行,导致的问题就是你监听的值一直没有变化,所以我们需要将页面里面的uuid变化时刻监听,所以我们需要在computed里面接收最新的uuid,然后我们监听这个里面的值,只要改变,就做出相应的改变,这样就满足了我们的需求,

问题1:为什么使用computed不直接使用watch?

有人看到以后就会觉得我们直接监听这个值不行吗?我们这里要明白的是watch是只可以监听data里面声明的变量或者对象,除此之外是监听不到的,而computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。

问题2:为什么使用缓存?

这里使用缓存的目的是为了你第一次进来的时候,如果用户什么都不切换,不执行change_machine函数的话,那么我们请求接口的参数是空的,所以我们需要默认一个值,你可以直接在store里面默认,也可以我在第一次进来的时候直接判断是不是存在store的值,没有的话就用我默认的缓存里面的值。

问题3: 为什么created里面已经拿到了,还要写监听函数?

这个问题可能有人会问,但是其实很简单,因为用户不刷新页面的时候created是不执行的,那么我们就拿不到最新的uuid进行数据的更新,所以要写监听的函数。

问题4: 为什么使用this.$store.dispatch?

我们这里使用是根据官方文档来的,你可以直接使用commit或者什么也不用,直接this.$store.state.machine_uuid_flag也是可以的,但是我们改变了uuid,那么就要重置一下store里面的原始值,所以这里需要接收我们改变的值,也就是用户选择了别的机器的时候用的值。如果我们不需要重置原始值的话,可以直接定义一个全局变量,然后直接

this.$store.state.machine_uuid_flag(这里格式乱了)就可以了,但是这样的业务场景应该不多。毕竟我们定义了就是为了改变它从而我们可以监听这个变化的值。

总结

写到这里基本上的用法我写完了,可能写的没有那些大神写的详细,也没有什么原理分析,写的也比较浅显,我看很多人写博客的时候喜欢分析一下原理,一方面显的专业性比较高,一方面可以有利于自己的理解和别人的理解,首先我也是不经常使用这个技术栈,其次是我个人觉得用的好要比明白原理强,我不喜欢只讲原理一个例子都不写的人,毕竟例子是最可以发现问题的,也是最直观的,就写到这里吧,以后再更新,我写博客的目的是记录自己写项目的过程,记录用到的东西,以后用到了更深的再更新,希望可以帮助到人更好。写的不对的希望可以直接联系我,我及时纠正,谢谢大家的支持。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 如何在PHPcms网站中添加广告
    本文详细介绍了在PHPcms网站后台添加广告的方法,涵盖多种常见的广告形式,如百度广告和Google广告,并提供了相关设置的步骤。同时,文章还探讨了优化网站流量的SEO策略。 ... [详细]
  • TCP长连接设备管理平台:架构与功能概览
    本文介绍了基于TCP长连接的设备管理平台的设计理念、技术选型及主要功能模块。最初,项目旨在实现简单的协议测试,但随着需求扩展,逐步演变为一个完整的前后端分离系统。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 如何使用Ionic3框架创建首个混合开发应用
    混合开发是指结合原生(Native)与网页(Web)技术进行移动应用开发的方法。本文将详细介绍如何利用Ionic3这一流行的混合开发框架,从环境搭建到创建并运行首个应用的全过程。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • C++实现经典排序算法
    本文详细介绍了七种经典的排序算法及其性能分析。每种算法的平均、最坏和最好情况的时间复杂度、辅助空间需求以及稳定性都被列出,帮助读者全面了解这些排序方法的特点。 ... [详细]
  • 本文基于刘洪波老师的《英文词根词缀精讲》,深入探讨了多个重要词根词缀的起源及其相关词汇,帮助读者更好地理解和记忆英语单词。 ... [详细]
  • 本文将详细介绍如何使用剪映应用中的镜像功能,帮助用户轻松实现视频的镜像效果。通过简单的步骤,您可以快速掌握这一实用技巧。 ... [详细]
  • 题目描述:给定n个半开区间[a, b),要求使用两个互不重叠的记录器,求最多可以记录多少个区间。解决方案采用贪心算法,通过排序和遍历实现最优解。 ... [详细]
  • 深入理解Java中的volatile、内存屏障与CPU指令
    本文详细探讨了Java中volatile关键字的作用机制,以及其与内存屏障和CPU指令之间的关系。通过具体示例和专业解析,帮助读者更好地理解多线程编程中的同步问题。 ... [详细]
  • 使用 Angular CLI 快速构建 Web 前端项目
    本文详细介绍如何利用 Angular CLI 的常用命令来搭建和管理 Angular 项目,包括项目创建、依赖管理、组件生成等核心操作。 ... [详细]
  • Web前端开发中Webpack项目的实用技巧总结
    本文探讨了在使用Webpack构建前端项目时的一些实用技巧,包括如何高效地使用移动端UI框架Mint UI和MUI,以及如何优化项目性能和用户体验。 ... [详细]
author-avatar
Yao2502880171
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有