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实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
js自制图片放大镜功能
Jan 24 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
使用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中的超全局变量
2006/10/09 PHP
把PHP安装为Apache DSO
2006/10/09 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python实现视频分帧效果
2019/05/31 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
python math模块的基本使用教程
2021/01/16 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
会计专业自荐信
2013/12/02 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
大学生评语大全
2014/04/18 职场文书
节电标语大全
2014/06/23 职场文书
公司董事任命书
2015/09/21 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js