uniapp如何修改全局变量

uniapp修改全局变量的方法：1、在普通页面获取全局变量，重新赋值；2、通过vue的状态管理工具vuex管理全局变量，代码为【let str = contObj.str;】。



本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。

推荐（免费）：uni-app开发教程

uniapp修改全局变量的方法：

一、引用公共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(){

    //获取全局设置的变量

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

二、通过vue的状态管理工具vuex管理全局变量

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

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

2、页面中获取需要使用的全局变量

（1）、直接通过全局挂载的那种方式去获取（定义在计算属性中是为了方便实时的监听变量重新赋值）

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,

    })

　　//当变量名一致时（简写）

　　//...mapState(['initName','memberData'])

},

3、重新赋值vuex中的全局变量

methods:{

    //单一方法改变指定的变量

  changeMember:function(){

    let mem = {

        name:'爱尚丽明',

        age:'28'

    }

    this.$store.dispatch('copeFun',mem)

    },     

       //通过传入要改的变量名进行改变变量

    changeMemberPub:function(){

      let memberData = {

        name:'爱尚',

        age:25

    }

    let $obj = {}

    $obj.cont = memberData ;

    $obj.str = 'memberData'

    this.$store.dispatch('changeFun',$obj)

   }      

}