Vue?關(guān)于Store的用法小結(jié)
更新時(shí)間：2024年08月29日 11:17:50 作者：Teln_小凱
Vue?Store是的狀態(tài)管理模式和庫(kù),它提供了一種集中存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下
Store就是全局變量都是可以雙向綁定的，以下是模塊的用法：
state定義的是變量名稱，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)文章
雙向數(shù)據(jù)綁定原理主要運(yùn)用了發(fā)布訂閱模式來(lái)實(shí)現(xiàn)的，通過(guò)Object.defineProperty對(duì)數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue項(xiàng)目中$t()的意思是什么，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中fragment.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue Element前端應(yīng)用開(kāi)發(fā)之Vuex中的API Store View的使用
這篇文章主要介紹了Vue Element前端應(yīng)用開(kāi)發(fā)之Vuex中的API Store View的使用，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
淺談vue權(quán)限管理實(shí)現(xiàn)及流程
這篇文章主要介紹了淺談vue權(quán)限管理實(shí)現(xiàn)及流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
深入理解使用Vue實(shí)現(xiàn)Context-Menu的思考與總結(jié)
這篇文章主要介紹了使用Vue實(shí)現(xiàn)Context-Menu的思考與總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問(wèn)題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue+axios+java實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了vue+axios+java實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue3批量異步更新是如何實(shí)現(xiàn)的，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08