uni-app多种设置全局变量及全局变量重新赋值
一、引用公共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(); //强制数据渲染
感觉有用的小伙伴们麻烦点个推荐!谢谢!!!