快捷導(dǎo)航

vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享

更新時(shí)間：2020年03月03日 08:50:58 作者：悠讓

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

有需求才會(huì)有應(yīng)用！

需求：vue項(xiàng)目中，我需要一個(gè)類似全局的變量保存一個(gè)tag的值，在不同層級(jí)下的子組件中，對(duì)這個(gè)變量進(jìn)行修改，并且使變化的結(jié)果作用在組件頁面上。

這里使用vuex解決問題，代碼如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const state = {
 spinTag: false, //spin組件標(biāo)記
};
//改變狀態(tài)的方法
const mutations = {
 spinTagTAG(state, tag) {
 state.spinTag = tag;
 }
};
var store = new Vuex.Store({
 state,
 mutations
});

export default store;

此時(shí)，在任意子組件中用一下代碼即可完成我需求中提到得，修改值并且作用與組件頁面中。

this.$store.commit('spinTagTAG', true); // 打開spin組件

此需求來源于antd vue下spin組件不能覆蓋整個(gè)瀏覽器，并且隨叫隨到，于是，我用了vuex。
代碼如下：

<template>
 <div id="app">
 <a-spin size="large" :spinning="this.$store.state.spinTag">
  <router-view></router-view>
 </a-spin>
 </div>
</template>

到此這篇關(guān)于vuex的特殊應(yīng)用案例分享的文章就介紹到這了,更多相關(guān)vuex的應(yīng)用案例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vuex

相關(guān)文章

Vue.js中自定義Markdown插件實(shí)現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個(gè)插件來解析<references>標(biāo)簽,并將其轉(zhuǎn)換為HTML,這種方法可以應(yīng)用于其他自定義標(biāo)簽和功能,為Vue.js應(yīng)用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue2中使用less簡易教程
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動(dòng)配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了
2018-03-03
Vue基礎(chǔ)語法知識(shí)梳理下篇
這篇文章主要介紹了Vue基礎(chǔ)語法知識(shí)梳理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-12-12
Vue中component標(biāo)簽解決項(xiàng)目組件化操作
這篇文章主要介紹了Vue中component標(biāo)簽解決項(xiàng)目組件化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
VUE對(duì)接deepseekAPI調(diào)用方式
文章介紹了如何在Vue項(xiàng)目中對(duì)接DeepSeek API,包括在開放平臺(tái)注冊(cè)賬號(hào)申請(qǐng)APIKey、安裝axios庫、創(chuàng)建API調(diào)用函數(shù)以及在Vue組件中調(diào)用該函數(shù)
2025-01-01
Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入)
這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入),需要的朋友可以參考下
2023-09-09
mpvue構(gòu)建小程序的方法(步驟+地址)
mpvue是一個(gè)使用Vue.js開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
Vant Weapp組件踩坑:picker的初始賦值解決
這篇文章主要介紹了Vant Weapp組件踩坑:picker的初始賦值解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
詳解vue 動(dòng)態(tài)加載并注冊(cè)組件且通過 render動(dòng)態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動(dòng)態(tài)加載并注冊(cè)組件且通過 render動(dòng)態(tài)創(chuàng)建該組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)
開發(fā)離不開權(quán)限,不同的用戶登錄,根據(jù)不同的權(quán)限,可以訪問不同的管理目錄，本文主要介紹了vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-04-04