uniapp重新渲染页⾯_uni-app多种设置全局变量及全局变量重 新赋值
⼀、引⽤公共common.js(1、可在页⾯中直接引⼊common.js 2、在main.js中引⽤并挂载(这⾥是第⼆种))
export default{
memberObj:{
name:'初始姓名',
},
setMemberObj(data){berObj = Object.assign({},berObj,data)
}
}
(1)、在全局main.js中引⽤
import Vue from 'vue'import App from'./App'import member from'./common/common.js'import store
from'./fig.productionTip= falseVue.prototype.$store=store
Vue.prototype.$member=member;
Vue.prototype.$enName= 'ming';
App.mpType= 'app'const app= newVue({
store,
...App
})
app.$mount()
onShow:function(){//获取全局设置的变量
console.berData);//输出值{name:'初始姓名'}
},
methods: {
bindLogin() {
let that= this;
let obj={
name:'爱尚',
sex:'男'}
that.$member.setMemberObj(obj);
},
企业医生}
//再次在别的页⾯调⽤时内容已发⽣变化
console.log(this.$berObj)
//{name:'爱尚',sex:'男'}
⼆、通过vue的状态管理⼯具vuex管理全局变量
1、创建store⽂件，store.js
import Vue from'vue'import Vuex from'vuex'Vue.use(Vuex)
const store= newVuex.Store({
state: {
memberData:'',
initName:''},
mutations: {
copy(state,cont){//单⼀的改变某⼀个变量 console.log(state)
console.log(cont)
},
锰结核change(state,contObj){//通过传⼊的变量去改变对应的全局变量
let str =contObj.str;
以科学发展观为统领let ;
state[str]=cont;
},
},
actions:{
copeFun:function(context,mData){罗贤哲
contextmit('copy',mData)
},
changeFun:function(context,obj){
contextmit('change',obj)蔡铁根
}
}
})
exportdefault store
2、在main.js中引⼊store.js
import Vue from 'vue'import App from'./App'import store from'./store';
Vue.prototype.$store=store;
App.mpType= 'app';
const app= newVue({
store,
...App
})
app.$mount()
3、页⾯中获取需要使⽤的全局变量
(1)、直接通过全局挂载的那种⽅式去获取(定义在计算属性中是为了⽅便实时的监听变量重新赋值) 1、直接通过全局挂载的那种⽅式去获取
computed:{
memberData:function(){return this.$berData;
},
},
(2)、通过页⾯中引⼊vuex去获取
import {mapState,mapMutations} from "vuex"；
computed:{
//正常写法
...mapState({
memberData:state=&berData,
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={}
$=memberData ;
$obj.str= 'memberData'
this.$store.dispatch('changeFun',$obj)
}
}
最后提⽰⼀点，如果重新赋值的全局变量没有实时去渲染可以尝试使⽤this.$forceUpdate(); //强制数据渲染
船舶自动化设备
