VUE 定義全域性變數
阿新 • • 發佈:2019-06-07
VUE.js 中涉及到JS全域性變數
一、全域性變數專用模組得引入
全域性變數模組 Global.js
const colorList = [
'violet',
'orange',
'blue',
'darkyellow',
'wheat',
]
const colorListLength = 5
export default
{
colorList,
colorListLength
}
模組裡的變數用export 丟擲去,當需要使用時,引入模組global。
需要使用全域性變數的模組 html.vue
<template> <ul> <template v-for="item in mainList"> <div v-for="item in getColor" :key="item"> {{item}} </div> </template> </ul> </template> <script type="text/javascript"> import global_ from './components/Global' export default { data () { return { getColor: global_.colorList } } } </script>
二、全域性變數模組掛載到Vue.prototype 。
Global.js同上,在main.js里加下面程式碼
import global_info from './components/Global' Vue.prototype.GLOBAL = global_info
掛載之後,在需要引用全域性量的模組處,不需再匯入全域性量模組,直接用this就可以,如下:
<script type="text/javascript"> export default { data () { return { getColor: this.GLOBAL.colorList } } } </script>
三、使用VUEX儲存狀態值
Vuex是一個專門為Vue.js應用程式開發的狀態管理模式, 它採用集中式儲存管理所有元件的公共狀態, 並以相應的規則保證狀態以一種可預測的方式發生變化.
store.js定義
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); // 建立vuex的store export default new Vuex.Store({ state: { count: 1 }, // 更改store的狀態 mutations: { increment(state) { state.count++; }, decrement(state) { state.count--; } }, // 有非同步的時候, 需要action actions: { increment(context) { context.commit("increment"); }, decrement(context) { setTimeout(function() { context.commit("decrement"); }, 10); } }, // 通過getter 進行資料獲取 getters: { getState(state) { return state.count > 0 ? state.count : 0; } } });
在main.js,引入store.js
import store from "./store/index";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
在頁面模組直接使用store呼叫
count=this.$store.state.count
四、使用window儲存變數
建立 global.js
const config = {
name:'ochmd',
age:"num"
}
let bindToGlobal = (obj, key) => {
if (typeof window[key] === 'undefined') {
window[key] = {};
}
for (let i in obj) {
window[key][i] = obj[i]
}
}
bindToGlobal(config,'_const')
在模組頁面使用
window._const.name //ochmd
PS:以上內容僅供參考,如有疑問敬請指