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

消烦丹 發表於 2019-6-1 14:22:00

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

一、引用公共common.js(1、可在页面中直接引入common.js 2、在main.js中引用并挂载（这里是第二种）)
<div class="cnblogs_code">
<pre>export default {
memberObj:{
 name:'初始姓名',
},
setMemberObj(data){
 this.memberObj = Object.assign({},this.memberObj,data)
}
}</pre>
</div>
(1)、在全局main.js中引用
<div class="cnblogs_code">
<pre>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()</pre>
</div>
在普通页面获取全局变量，重新赋值
<div class="cnblogs_code">
<pre>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:'男'}</pre>
<pre></pre>
</div>
 
二、通过vue的状态管理工具vuex管理全局变量
<div class="cnblogs_code">
<pre>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 = cont;
 },
},
actions:{
 copeFun:function(context,mData){
 context.commit('copy',mData)
 },
 changeFun:function(context,obj){
 context.commit('change',obj)
 }
}
})

export default store</pre>
</div>
2、在main.js中引入store.js
<div class="cnblogs_code">
<pre>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()</pre>
</div>
3、页面中获取需要使用的全局变量
<pre>（1）、直接通过全局挂载的那种方式去获取（定义在计算属性中是为了方便实时的监听变量重新赋值）</pre>
<div class="cnblogs_code">
<pre>1、直接通过全局挂载的那种方式去获取

computed:{
memberData:function(){
 return this.$store.state.memberData;
},
},</pre>
</div>
<pre>（2）、通过页面中引入vuex去获取</pre>
<div class="cnblogs_code">
<pre>import {mapState,mapMutations} from "vuex"；
computed:{ 　　//正常写法
...mapState({
 memberData:state => state.memberData,
 initName:state => state.initName,
}) 　　//当变量名一致时（简写） 　　//...mapState(['initName','memberData']) 
},</pre>
</div>
3、重新赋值vuex中的全局变量
<div class="cnblogs_code">
<pre>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)
}
}</pre>
</div>
 
最后提示一点，如果重新赋值的全局变量没有实时去渲染可以尝试使用
this.$forceUpdate(); //强制数据渲染
  
来源：https://www.cnblogs.com/aishangliming/p/10959497.html

頁: [1]

琼殿技术论坛's Archiver

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