Heim > Web-Frontend > uni-app > So ändern Sie globale Variablen in Uniapp

So ändern Sie globale Variablen in Uniapp

coldplay.xixi
Freigeben: 2020-12-15 16:22:44
Original
5798 Leute haben es durchsucht

Methoden zum Ändern globaler Variablen in Uniapp: 1. Globale Variablen auf einer normalen Seite abrufen und Werte neu zuweisen; 2. Globale Variablen über das Statusverwaltungstool vuex verwalten, der Code lautet [let str = contObj.str;].

So ändern Sie globale Variablen in Uniapp

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

So ändern Sie globale Variablen in Uniapp:

1. Referenzieren Sie common common.js (1. Sie können common.js direkt auf der Seite einführen 2. In main Referenziert und in .js gemountet (hier ist der zweite Typ))

export default {
    memberObj:{
        name:'初始姓名',
    },
    setMemberObj(data){
        this.memberObj = Object.assign({},this.memberObj,data) 
    }
}
Nach dem Login kopieren

(1) Referenziert in global main.js

import Vue from 'vue'
import App from './App'
import member from './common/common.js'
import store from './store'
Vue.config.productionTip = false
Vue.prototype.$store = store
Vue.prototype.$member = member;
Vue.prototype.$enName = 'ming';
App.mpType = 'app'
const app = new Vue({
    store,
    ...App
})
app.$mount()
Nach dem Login kopieren

Holen Sie sich die globale Variable auf der normalen Seite und weisen Sie den Wert neu zu

onShow:function(){
    //获取全局设置的变量
    this.memberData = this.$member.memberObj;
    console.log(this.memberData);
    //输出值{name:'初始姓名'}
},
methods: {
  bindLogin() {
    let that = this;
    let obj = {
        name:'爱尚',
        sex:'男'
    }
    that.$member.setMemberObj(obj);
  },
}
//再次在别的页面调用时内容已发生变化
console.log(this.$member.memberObj)
//{name:'爱尚',sex:'男'}
Nach dem Login kopieren

2 über vue Das Verwaltungstool vuex verwaltet globale Variablen Montage (in berechneten Eigenschaften definiert, um die Neuzuweisung von Überwachungsvariablen in Echtzeit zu erleichtern)

1、创建store文件,store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        memberData:'',
        initName:''
    },
    mutations: {
        copy(state,cont){
            //单一的改变某一个变量
            console.log(state)
            console.log(cont)
            state.memberData = cont;
        },
        change(state,contObj){
            //通过传入的变量去改变对应的全局变量
            let str = contObj.str;
            let cont = contObj.cont;
            state[str] = cont;
        },
    },
    actions:{
        copeFun:function(context,mData){
            context.commit('copy',mData)
        },
        changeFun:function(context,obj){
            context.commit('change',obj)
        }
    }
})
export default store
Nach dem Login kopieren

(2), erhalten Sie

import Vue from 'vue'
import App from './App'
import store from './store';
Vue.config.productionTip = false;
Vue.prototype.$store = store;
App.mpType = 'app';
const app = new Vue({
    store,
    ...App
})
app.$mount()
Nach dem Login kopieren
durch Einführung von vuex auf der Seite

3. Weisen Sie globale Variablen in vuex neu zu.

1、直接通过全局挂载的那种方式去获取
computed:{
   memberData:function(){
      return this.$store.state.memberData;
   },
},
Nach dem Login kopieren

Verwandte kostenlose Lernempfehlung :

php-Programmierung(Video)

Das obige ist der detaillierte Inhalt vonSo ändern Sie globale Variablen in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage