uni-app多种设置全局变量及全局变量重新赋值

红太狼 2021-12-01 13:36 915阅读 0赞

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

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

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

最后提示一点，如果重新赋值的全局变量没有实时去渲染可以尝试使用

**this.$forceUpdate(); //强制数据渲染**

转载于:https://www.cnblogs.com/aishangliming/p/10959497.html