Vue?關(guān)于Store的用法小結(jié)
Store就是全局變量都是可以雙向綁定的,以下是模塊的用法:
state定義的是變量名稱(chēng),mutations里面是給變量賦值的方法
export default {
namespaced: true,
state: {
//打開(kāi)的Tabs
tabs: null,
//當(dāng)前顯示的key
selectTabKey: null
},
mutations: {
setSelectTabKey(state, key) {
state.selectTabKey = key;
localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(key));
},
setTabs(state, tabs) {
state.tabs = tabs;
localStorage.setItem(process.env.ADMIN_TABS_KEY, JSON.stringify(tabs));
},
initTabs(state, tab) {
var localTabs = localStorage.getItem(process.env.ADMIN_TABS_KEY)
if (localTabs != null) {
state.tabs = JSON.parse(localTabs);
state.selectTabKey = JSON.parse(localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY));
} else {
state.selectTabKey = tab.key;
localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(state.selectTabKey));
state.tabs = [];
state.tabs.push({
title: tab.title,
icon: tab.icon,
content: "",
key: tab.key,
closable: false,
icon_bk: "",
url: tab.url,
});
localStorage.setItem(process.env.ADMIN_TABS_KEY, JSON.stringify(state.tabs));
}
},
addTabs(state, tab) {
state.selectTabKey = tab.key;
localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(state.selectTabKey));
var localTabs = localStorage.getItem(process.env.ADMIN_TABS_KEY)
if (localTabs != null) {
state.tabs = JSON.parse(localTabs);
}
if (state.tabs == null) {
state.tabs = [];
}
//判斷有沒(méi)有在tabs里面
var isAdd = false;
for (var pn of state.tabs) {
if (pn.key == tab.key) {
isAdd = true;
break;
}
}
if (isAdd == false) {
state.tabs.push({
title: tab.title,
icon: tab.icon,
content: "",
key: tab.key,
closable: true,
icon_bk: "",
url: tab.url,
});
}
localStorage.setItem(process.env.ADMIN_TABS_KEY, JSON.stringify(state.tabs));
},
}
}然后整合模塊
import menu from './menu'
import tab from './tab'
import setting from './setting'
export default {menu, tab,setting}
對(duì)外輸出
import Vue from 'vue'
import 'es6-promise/auto'
import Vuex from 'vuex'
import modules from './modules'
Vue.use(Vuex)
const store = new Vuex.Store({modules})
export default store
Main方法注冊(cè)

獲取
this.$store.state.tab.selectTabKey
賦值
this.$store.commit("tab/setSelectTabKey", targetKey);監(jiān)控值改變
watch: {
"$store.state.tab.selectTabKey": {
handler: function (newVal, oldVal) {
if (this.currTarger != newVal) {
this.onTabChange(newVal);
}
},
},
},可以直接綁定

注意點(diǎn),全局變量存localstore的時(shí)候必須轉(zhuǎn)JSONString,取的時(shí)候也得轉(zhuǎn),否則 綁定到控件上會(huì)失效
存
localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(key));
取
state.selectTabKey = JSON.parse(localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY));
之前直接這樣寫(xiě)會(huì)導(dǎo)致無(wú)法綁定到控件
localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, key);
state.selectTabKey = localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY);
到此這篇關(guān)于Vue 關(guān)于Store的用法的文章就介紹到這了,更多相關(guān)Vue Store 用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3實(shí)現(xiàn)監(jiān)聽(tīng)store中state狀態(tài)變化的簡(jiǎn)單方法
- vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說(shuō)明
- Vuex的store中的Module用法及說(shuō)明
- vuex中this.$store.commit和this.$store.dispatch的基本用法實(shí)例
- vue data中如何獲取使用store中的變量
- vue3中router路由以及vuex的store使用解析
- 在Vue中使用this.$store或者是$route一直報(bào)錯(cuò)的解決
- vue.js的狀態(tài)管理vuex中store的使用詳解
相關(guān)文章
antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)
這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
vue如何通過(guò)插槽組件之間數(shù)據(jù)傳遞
這篇文章主要介紹了vue如何通過(guò)插槽組件之間數(shù)據(jù)傳遞問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue2和elementUI?實(shí)現(xiàn)落日余暉登錄頁(yè)和滑塊校驗(yàn)功能
這篇文章主要介紹了vue2和elementUI打造落日余暉登錄頁(yè)和滑塊校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue項(xiàng)目使用electron打包桌面應(yīng)用方式
本文詳細(xì)介紹了如何使用Vue3和Electron創(chuàng)建一個(gè)桌面應(yīng)用程序,并提供了一個(gè)完整的步驟指南,包括項(xiàng)目初始化、配置、安裝依賴(lài)、主進(jìn)程和渲染進(jìn)程的設(shè)置、打包配置以及解決常見(jiàn)問(wèn)題的方法2025-12-12
解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪(fǎng)問(wèn)頁(yè)面顯示空白問(wèn)題
這篇文章主要介紹了解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪(fǎng)問(wèn)頁(yè)面顯示空白問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪(fǎng)問(wèn)的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪(fǎng)問(wèn)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue組件開(kāi)發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能
Vue是目前使用較廣泛的三大前端框架之一,其數(shù)據(jù)驅(qū)動(dòng)及組件化的特性使得前端開(kāi)發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗(yàn)碼官方文檔 基礎(chǔ)上,從封裝需要出發(fā)開(kāi)發(fā)一個(gè)簡(jiǎn)單的短信圖形驗(yàn)證Vue組件,具體內(nèi)容詳情大家參考下本文2017-11-11
如何解決ECharts圖表切換后縮成一團(tuán)的問(wèn)題
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團(tuán)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

