有哪些Vuex在Vue状态管理中的独特应用场景可以分享？

本文共计387个文字，预计阅读时间需要2分钟。

在Vue项目中，若需在全局范围内保存一个变量的值，并在不同层级的组件中对其进行修改，同时使修改后的结果在组件页面上生效，可以使用以下方法：

javascript// 在Vue的main.js或任何全局配置文件中Vue.prototype.$globalTag='初始值';

// 在需要修改这个变量的组件中methods: { updateGlobalTag(newTag) { this.$globalTag=newTag; }}

// 在组件页面上使用这个变量computed: { globalTag() { return this.$globalTag; }}

有需求才会有应用！

需求：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的应用案例内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！