全局變量
目錄：
- 通過(guò)js文件實(shí)現(xiàn)
- 通過(guò)Vue.prototype來(lái)實(shí)現(xiàn)
- globalData
- 通過(guò)Vuex實(shí)現(xiàn)
1跋核、通過(guò)js文件實(shí)現(xiàn)
創(chuàng)建一個(gè)js文件兢卵，如：global.js量淌，假設(shè)我們需要一個(gè)能夠在全局訪問(wèn)的data對(duì)象爽哎，我們可以這樣寫(xiě)：
var data = {}
function setData(obj){
data = obj
}
function getData(isCopy = false) {
if (!isCopy) {
return data
}
return JSON.parse(JSON.stringify(data))
}
module.exports = {
setData: setData,
getData: getData
}
個(gè)人是建議寫(xiě)成set和get函數(shù)的方式來(lái)設(shè)置和獲取data變量姐帚，不建議直接將data暴露給外部渣窜。
外部vue文件想訪問(wèn)data铺根，導(dǎo)入js文件即可：
<script>
/// 導(dǎo)入js文件，這里用的是相對(duì)路徑
import global from "../../common/js/global.js"
export default {
onShow:function(){
// 調(diào)用setData函數(shù)乔宿，可以設(shè)置data的值
global.setData({'name': 'diudiu'})
// 調(diào)用getData函數(shù)位迂，可以拿到data的值
var data = global.getData()
console.log(data)
}
}
</script>
外部js文件想要訪問(wèn)data，同理只要導(dǎo)入路徑详瑞。
import global from './global.js'
function testMethod(){
var data = global.getData()
console.log(data)
}
module.exports = {
testMethod: testMethod
}
這種方式的缺點(diǎn)是每一個(gè)使用的地方都需要導(dǎo)入頭文件掂林。
2、通過(guò)Vue.prototype來(lái)實(shí)現(xiàn)
注： .vue 和 .nvue 并不是一個(gè)規(guī)范坝橡，因此一些在 .vue 中適用的方案并不適用于 .nvue泻帮。 Vue 上掛載屬性，不能在 .nvue 中使用计寇。
1锣杂、直接掛載
一些常用的使用頻次高的函數(shù)和屬性脂倦，我們可以直接掛載到Vue.prototype上
在 main.js 中掛載屬性/方法：
/// 掛載屬性
Vue.prototype.data = {
name: 'diudiu'
}
/// 掛載函數(shù)
Vue.prototype.log = function(){
console.log('......')
}
在vue文件中使用：
<script>
export default {
onShow:function(){
/// 訪問(wèn)屬性
var data = this.data
console.log(data)
/// 調(diào)用方法
this.log()
}
}
</script>
控制臺(tái)輸出：
{name: "diudiu"}
......
但是不建議掛載直接寫(xiě)屬性名和函數(shù)名，因?yàn)檫@樣如果vue中也有同名的屬性和函數(shù)時(shí)元莫，vue中訪問(wèn)的就是自己的屬性和函數(shù)赖阻。所以我們一般使用
Vue.prototype掛載屬性和函數(shù)時(shí)會(huì)在前面加上$前綴。上面的代碼改造如下：
Main.js中
/// 掛載屬性
Vue.prototype.$dataObj = {
name: 'diudiu'
}
/// 掛載函數(shù)
Vue.prototype.$log = function(){
console.log('......')
}
vue文件中調(diào)用：
<script>
export default {
onShow:function(){
/// 訪問(wèn)屬性
var data = this.$dataObj
console.log(data)
/// 調(diào)用方法
this.$log()
}
}
</script>
2柒竞、掛載js文件
通過(guò)Vue.prototype將屬性和函數(shù)一個(gè)一個(gè)的掛載上去政供，最后main.js會(huì)顯得很臃腫，而且不好維護(hù)朽基。我們可以按需將他們抽離出來(lái)分別封裝到對(duì)應(yīng)的js文件中布隔，以上文的global.js為例，在main.js中直接掛載global.js：
/// 導(dǎo)入js文件
import global from 'common/js/global.js'
/// 掛載
Vue.prototype.$global = global
在vue文件中使用
<script>
export default {
data() {
return {
}
},
onShow:function(){
/// 調(diào)用global中的setData函數(shù)
this.$global.setData({name:'diudiu'})
/// 調(diào)用global中的getData函數(shù)
var data = this.$global.getData()
console.log(data)
}
}
</script>
通過(guò)Vue.prototype方式優(yōu)點(diǎn)是不需要在使用的地方導(dǎo)入路徑稼虎，缺點(diǎn)是該方式只在vue文件中通用衅檀，在js文件中不生效。
3霎俩、globalData
小程序中有globalData的概念哀军，我們可以在App.vue文件中設(shè)置globalData。
<script>
export default {
globalData:{
name:'diudiu',
logString:function(str){
console.log(str)
}
},
onLaunch: function() {
},
onShow: function() {
},
onHide: function() {
}
}
</script>
這里我們?cè)O(shè)置了一個(gè)屬性：name打却，一個(gè)函數(shù)：logString杉适。在js文件或者vue文件中，我們可以通過(guò)getApp().globalData來(lái)拿到它柳击。代碼如下：
var global = getApp().globalData
var name = global.name
global.logString('name: ' + name)
/// 控制臺(tái)輸入如下：
/// name： diudiu
注：
如果你需要在
App.vue中使用globalData猿推，不能通過(guò)getApp().globalData方式來(lái)獲取。在
App.vue需使用this.$options.globalData來(lái)獲取globalData捌肴，代碼示例如下：
<script> export default { globalData:{ name:'diudiu', logString:function(str){ console.log(str) } }, onShow: function() { console.log(this.$options.globalData) } } </script>
4蹬叭、通過(guò)Vuex實(shí)現(xiàn)
我們某一個(gè)頁(yè)面vue文件的計(jì)算型屬性模塊引用了上述方法定義的全局變量時(shí)，當(dāng)變量發(fā)生改變時(shí)并不能及時(shí)的反饋在當(dāng)前頁(yè)面中状知。舉個(gè)例子：
<template>
<view >
<button type="default" @click="buttonClick">點(diǎn)擊修改name</button>
<text>{{ name }}</text>
</view>
</template>
<script>
export default {
computed: {
name(){
return getApp().globalData.name
}
},
method:{
buttonClick: function(){
getApp().globalData.name = '張三'
}
}
}
</script>
點(diǎn)擊按鈕觸發(fā)buttonClick函數(shù)秽五，全局變量globalData.name值實(shí)際上被修改了，但是界面上展示的name還是之前的值饥悴，并不會(huì)被刷新坦喘。需要界面實(shí)時(shí)刷新，可以考慮使用Vuex的方式實(shí)現(xiàn)铺坞。
1起宽、創(chuàng)建相關(guān)目錄和文件
在工程根目錄下創(chuàng)建store文件夾，并在store文件夾下創(chuàng)建index.js文件济榨。js文件內(nèi)容如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
name: '李四'
},
mutations: {
modifyUserName(state){
state.name = '張三'
}
}
})
export default store
2赴涵、掛載
main.js文件中
import store from './store'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
使用
此時(shí)改造下第一步中的vue文件代碼
<template>
<view >
<button type="default" @click="buttonClick">點(diǎn)擊修改name</button>
<text>{{ name }}</text>
</view>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
computed: {
...mapState(['name'])
},
method:{
...mapMutations(['modifyUserName']),
buttonClick: function(){
this.modifyUserName()
}
}
}
</script>
此時(shí)价捧，點(diǎn)擊按鈕修改name之后擦剑，界面展示的文字也會(huì)發(fā)生改變。對(duì)比前面的方式磁餐，該方式更加適合處理全局的并且值會(huì)發(fā)生變化的情況。
關(guān)于vuex更詳細(xì)的語(yǔ)法和用法筋岛，請(qǐng)參考教程：地址
