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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
Express框架之connect-flash详解
May 31 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
javascript实现贪吃蛇小练习
Jul 05 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自动更新新闻DIY
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python引用DLL文件的方法
2015/05/11 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python 画图 图例自由定义方式
2020/04/17 Python
基于keras中的回调函数用法说明
2020/06/17 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
python多线程和多进程关系详解
2020/12/14 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
老海军美国官网:Old Navy
2016/09/05 全球购物
广州盈通面试题
2015/12/05 面试题
英语道歉信范文
2014/01/09 职场文书
《落花生》教学反思
2014/02/25 职场文书
考试作弊检讨书
2014/10/21 职场文书
单位接收函格式
2015/01/30 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android