Vue?關(guān)于Store的用法小結(jié)
更新時間：2024年08月29日 11:17:50 作者：Teln_小凱
Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下
Store就是全局變量都是可以雙向綁定的，以下是模塊的用法：
state定義的是變量名稱，mutations里面是給變量賦值的方法
export default {
namespaced: true,
state: {
//打開的Tabs
tabs: null,
//當前顯示的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 = [];
}
//判斷有沒有在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}
對外輸出
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方法注冊
獲取
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);
}
},
},
},可以直接綁定
注意點，全局變量存localstore的時候必須轉(zhuǎn)JSONString，取的時候也得轉(zhuǎn)，否則 綁定到控件上會失效
存
localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(key));
取
state.selectTabKey = JSON.parse(localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY));
之前直接這樣寫會導致無法綁定到控件
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
雙向數(shù)據(jù)綁定原理主要運用了發(fā)布訂閱模式來實現(xiàn)的，通過Object.defineProperty對數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue項目中$t()的意思是什么，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了Vue中fragment.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue Element前端應用開發(fā)之Vuex中的API Store View的使用
這篇文章主要介紹了Vue Element前端應用開發(fā)之Vuex中的API Store View的使用，對Vue感興趣的同學，可以參考下2021-05-05
這篇文章主要介紹了淺談vue權(quán)限管理實現(xiàn)及流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
深入理解使用Vue實現(xiàn)Context-Menu的思考與總結(jié)
這篇文章主要介紹了使用Vue實現(xiàn)Context-Menu的思考與總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了vue+axios+java實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
vue解決使用$http獲取數(shù)據(jù)時報錯的問題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了Vue3批量異步更新是如何實現(xiàn)的，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以跟隨小編一起學習一下2023-08-08