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

So ändern Sie globale Variablen in Uniapp

coldplay.xixi
coldplay.xixiOriginal
2020-12-15 16:22:445797Durchsuche

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) 
    }
}

(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()

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:'男'}

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

(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()
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;
   },
},

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!

Stellungnahme:
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