uniapp에서 전역적으로 변수를 정의하는 방법

Uniapp의 전역 변수 정의 방법: 1. 공용 모듈을 사용합니다. 코드는 [return obj instanceof Array]입니다. 2. 자주 사용되는 일부 상수 또는 메서드를 [Vue.prototype]으로 직접 확장합니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천(무료): uni-app 개발 튜토리얼

uniapp에서 전역 변수를 정의하는 방법:

1. 공개 모듈

전용 모듈을 정의하여 이러한 전역 변수를 구성하고 관리합니다. 필수 페이지.

이 방법은 여러 vue 페이지 또는 여러 nvue 페이지 간의 공유만 지원하고 vue와 nvue 간의 공유는 지원하지 않습니다.

예제는 다음과 같습니다.

uni-app 프로젝트의 루트 디렉터리에 공통 디렉터리를 생성한 후, 해당 공통 디렉터리에 새로운 helper.js를 생성하여 퍼블릭 메소드를 정의합니다.

const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  
export default {  
    websiteUrl,  
    now,  
    isArray  
}

다음에는 페이지/index/index.vue에 있는 모듈을 참조하세요.

<script>  
    import helper from &#39;../../common/helper.js&#39;;  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log(&#39;now:&#39; + helper.now());  
        },  
        methods: {  
        }  
    }  
</script>

이 방법은 유지 관리가 더 편리하지만, 매번 도입해야 한다는 단점이 있습니다.

2. Vue.prototype 마운트

자주 사용되는 상수나 메소드를 Vue.prototype으로 직접 확장하면 각 Vue 객체가 이를 "상속"합니다.

이 메서드는 vue 페이지만 지원한다는 점에 유의하세요

예제는 다음과 같습니다.

main.js에서 속성/메서드

Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';  
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};

를 마운트한 다음 페이지/index/index.vue에서

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log(&#39;now:&#39; + this.now());  
        },  
        methods: {  
        }  
    }  
</script>

를 호출합니다. , main.js에 정의한 후에는 각 페이지에서 직접 호출할 수 있습니다.

Tips

• 각 페이지에 중복되는 속성이나 메소드 이름을 사용하지 마세요.

• Vue.prototype에 탑재된 속성이나 메서드는 통합 접두사를 사용하여 추가할 수 있는 것이 좋습니다. 예를 들어 $url 및 global_url은 코드를 읽을 때 현재 페이지의 내용과 쉽게 구별됩니다.

3. globalData

애플릿에는 globalData라는 개념이 있고, App에서는 전역 변수를 선언할 수 있습니다. Vue는 이전에는 이런 개념이 없었지만 uni-app에서는 globalData 개념을 도입하여 H5, App 등의 플랫폼에 구현했습니다.

App.vue에서 globalData를 정의하거나 API를 사용하여 이 값을 읽고 쓸 수 있습니다.

• globalData는 vue 및 nvue 공유 데이터를 지원합니다.

• globalData는 전역 변수를 사용하는 비교적 간단한 방법입니다.

Definition: App.vue

<script>  
    export default {  
        globalData: {  
            text: &#39;text&#39;  
        },  
        onLaunch: function() {  
            console.log(&#39;App Launch&#39;)  
        },  
        onShow: function() {  
            console.log(&#39;App Show&#39;)  
        },  
        onHide: function() {  
            console.log(&#39;App Hide&#39;)  
        }  
    }  
</script>  
<style>  
    /*每个页面公共css */  
</style>

js에서 globalData를 운용하는 방법은 다음과 같습니다.

• Assignment: getApp().globalData.text = 'test' getApp().globalData.text = 'test'

• 取值：console.log(getApp().globalData.text) // 'test'

값: console.log(getApp().globalData.text) // 'test'

globalData 데이터를 페이지에 바인딩해야 하는 경우 선언할 수 있습니다. 페이지의 온쇼에서 변수는 사이클 중에 재할당됩니다. HBuilderX 2.0.3부터 nvue 페이지는 uni-app 컴파일 모드에서 onshow도 지원합니다.

4, Vuex

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.

다음은 Vuex 사용법을 간략하게 설명하기 위해 로그인 후 사용자 정보를 동기적으로 업데이트하는 예입니다. 더 자세한 Vuex 콘텐츠를 보려면 공식 웹사이트 Vuex를 방문하는 것이 좋습니다.

예:

uni-app 프로젝트의 루트 디렉터리에 새 저장소 디렉터리를 만들고, 저장소 디렉터리에 index.js를 만들어 상태 값을 정의합니다

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: ''  
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token = '';  
            state.userName = '';  
            state.avatarUrl = '';  
        }  
    }  
})

그런 다음 main.js에 Vuex를 마운트해야 합니다

import store from './store'  
Vue.prototype.$store = store

마지막으로 /index/index.vue 페이지에서

<script>  
    import {  
        mapState,  
        mapMutations  
    } from &#39;vuex&#39;;  
    export default {  
        computed: {  
            ...mapState([&#39;avatarUrl&#39;, &#39;login&#39;, &#39;userName&#39;])  
        },  
        methods: {  
            ...mapMutations([&#39;logout&#39;])  
        }  
    }  
</script>

를 사용하세요. 관련 무료 학습 권장 사항:

프로그래밍 비디오🎜🎜🎜

위 내용은 uniapp에서 전역적으로 변수를 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!