vuex(vue状态管理)的特殊应用案例分享
2020-04-08 12:07
459 查看
有需求才会有应用!
需求: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的应用案例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
- Vue笔记:使用 vuex 管理应用状态
- 第三篇 Windows8 Metro管理应用生命周期和状态(摘微软官网)
- vuex之store拆分即多模块状态管理(modules)篇
- Nginx应用案例分享:压力测试
- Delphi下IOCP开源框架:DIOCP 成功应用案例分享
- mainjs状态管理vuex
- 详解vue组件化开发-vuex状态管理库
- 分享20个Web开发中模式弹窗应用案例
- (转)使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
- 简单实用vue状态管理vuex
- Vuex 模块化实现待办事项的状态管理
- Android第三方应用分享图文到微信朋友圈 & 微信回调通知分享状态
- 牛新庄《循序渐进DB2.DBA系统管理、运维与应用案例》及db2 developworks 730 tutorial中的一个疏忽
- Vuex 模块化实现待办事项的状态管理