Store就是全局变量都是可以双向绑定的，以下是模块的用法： state定义的是变量名称，mutations内里是给变量赋值的方法 [code]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)); }, } }[/code]然后整合模块 [code]import menu from './menu' import tab from './tab' import setting from './setting' export default {menu, tab,setting}[/code]
对外输出 [code]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[/code]
Main方法注册
获取 [code]this.$store.state.tab.selectTabKey[/code]赋值 [code]this.$store.commit("tab/setSelectTabKey", targetKey);[/code]监控值改变 [code]watch: { "$store.state.tab.selectTabKey": { handler: function (newVal, oldVal) { if (this.currTarger != newVal) { this.onTabChange(newVal); } }, }, },[/code]可以直接绑定
留意点，全局变量存localstore的时间必须转JSONString，取的时间也得转，否则 绑定到控件上会失效 存 [code]localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(key));[/code]取 [code]state.selectTabKey = JSON.parse(localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY));[/code]之前直接如许写会导致无法绑定到控件 localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, key); state.selectTabKey = localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY); 到此这篇关于Vue 关于Store的用法的文章就介绍到这了,更多相关Vue Store 用法内容请搜刮脚本之家从前的文章或继续浏览下面的相关文章希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/326682g3k.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 08:43 , Processed in 0.053192 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
