vuex(vue状态管理)的特殊应用案例分享


Posted in Javascript onMarch 03, 2020

有需求才会有应用!

需求:vue项目中,我需要一个类似全局的变量保存一个tag的值,在不同层级下的子组件中,对这个变量进行修改,并且使变化的结果作用在组件页面上。

这里使用vuex解决问题,代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const state = {
 spinTag: false, //spin组件标记
};
//改变状态的方法
const mutations = {
 spinTagTAG(state, tag) {
 state.spinTag = tag;
 }
};
var store = new Vuex.Store({
 state,
 mutations
});

export default store;

此时,在任意子组件中用一下代码即可完成我需求中提到得,修改值并且作用与组件页面中。

this.$store.commit('spinTagTAG', true); // 打开spin组件

此需求来源于antd vue下spin组件不能覆盖整个浏览器,并且随叫随到,于是,我用了vuex。
代码如下:

<template>
 <div id="app">
 <a-spin size="large" :spinning="this.$store.state.spinTag">
  <router-view></router-view>
 </a-spin>
 </div>
</template>

到此这篇关于vuex的特殊应用案例分享的文章就介绍到这了,更多相关vuex的应用案例内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
js实现自定义右键菜单
May 18 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
使用vue打包进行云服务器上传的问题
Mar 02 #Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 #Javascript
JS如何生成随机验证码
Mar 02 #Javascript
js实现烟花特效
Mar 02 #Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 #Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 #Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 #Javascript
You might like
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python列表操作方法详解
2020/02/09 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
小学社会实践活动总结
2014/07/03 职场文书
干部培训工作总结2015
2015/05/25 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python