Uniapp のグローバル変数変更方法: 1. 通常のページでグローバル変数を取得し、値を再割り当てします; 2. Vue の状態管理ツール vuex を通じてグローバル変数を管理します。コードは [let str = contObj.str;] です。 。
このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョンこの方法は、すべてのブランドのコンピューターに適しています。
推奨 (無料): uni-app 開発チュートリアル
uniapp でグローバル変数を変更する方法:
1. Public common.js を引用 (1. Common.js はページに直接導入できます。 2. main.js で参照およびマウントされます (ここでは 2 番目のタイプ))
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:'男'}
2.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
1 を通じてグローバル変数を管理します。 .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 を js に導入します。ページ
(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 プログラミング (ビデオ)
以上がuniappでグローバル変数を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。