PHP前端开发

uniapp如何修改全局变量

百变鹏仔 4周前 (11-21) #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 = falseVue.prototype.$store = storeVue.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.jsimport 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)   }       }

相关免费学习推荐:php编程(视频)