uniapp多種設(shè)置全局變量及全局變量重新賦值

一、引用公共common.js(1、可在頁面中直接引入common.js 2、在main.js中引用并掛載（這里是第二種）)

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

(1)、在全局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()

在普通頁面獲取全局變量，重新賦值

onShow:function(){
    //獲取全局設(shè)置的變量
    this.memberData = this.$member.memberObj;
    console.log(this.memberData);
    //輸出值{name:\'初始姓名\'}
},
methods: {
  bindLogin() {
    let that = this;
    let obj = {
        name:\'愛尚\(zhòng)',
        sex:\'男\(zhòng)'
    }
    that.$member.setMemberObj(obj);
  },
}
//再次在別的頁面調(diào)用時內(nèi)容已發(fā)生變化
console.log(this.$member.memberObj)
//{name:\'愛尚\(zhòng)',sex:\'男\(zhòng)'}

?

二、通過vue的狀態(tài)管理工具vuex管理全局變量

1、創(chuàng)建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){
            //通過傳入的變量去改變對應(yīng)的全局變量
            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、在main.js中引入store.js

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

3、頁面中獲取需要使用的全局變量

（1）、直接通過全局掛載的那種方式去獲取（定義在計算屬性中是為了方便實時的監(jiān)聽變量重新賦值）

1、直接通過全局掛載的那種方式去獲取

computed:{
   memberData:function(){
      return this.$store.state.memberData;
   },
},

（2）、通過頁面中引入vuex去獲取

import {mapState,mapMutations} from "vuex"；
computed:{
　　//正常寫法
    ...mapState({
        memberData:state => state.memberData,
        initName:state => state.initName,
    })

　　//當(dāng)變量名一致時（簡寫）
　　//...mapState([\'initName\',\'memberData\'])

},

3、重新賦值vuex中的全局變量

methods:{
    //單一方法改變指定的變量
  changeMember:function(){
    let mem = {
        name:\'愛尚麗明\',
        age:\'28\'
    }
    this.$store.dispatch(\'copeFun\',mem)
    },      
       //通過傳入要改的變量名進(jìn)行改變變量
    changeMemberPub:function(){
      let memberData = {
        name:\'愛尚\(zhòng)',
        age:25
    }
    let $obj = {}
    $obj.cont = memberData ;
    $obj.str = \'memberData\'
    this.$store.dispatch(\'changeFun\',$obj)
   }       
}

?

最后提示一點，如果重新賦值的全局變量沒有實時去渲染可以嘗試使用

this.$forceUpdate(); //強制數(shù)據(jù)渲染

?

?　　感覺有用的小伙伴們麻煩點個推薦！謝謝！！！