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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
原生JS实现烟花效果
Mar 10 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
js实现盒子拖拽动画效果
2020/08/09 Javascript
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
如何写自我鉴定
2014/03/19 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
资料员岗位职责
2015/02/10 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis