自创-在uniapp使用全局变量

一、参考文章

uni-app 全局变量的几种实现方式 优点:对uniapp理解的很深刻
uni-app多种设置全局变量及全局变量重新赋值优点:写的很踏实、易用
vue 和 nvue 共享的变量和数据

1、辅助参考:

uniapp里nvue和vue的关系是什么啊?为什么有vue文件了还要再重新为app单独写一份nvue呢
nvue开发与vue开发的常见区别

二、我的做法

第一篇理解uniapp,第二篇实操,加上配置文件融合到vuex里面,既保持结构清晰,又保证vue、nvue数据通用。

1、这样做的原因

  • 公用模块:太麻烦,太乱
  • 挂载 Vue.prototype: 调用时样子挺好看,但是功能欠缺(仅支持vue)
  • globalData: 调用的样子太丑
  • Vuex: 虽然逻辑上很麻烦,但是调用时样子好看,逻辑清晰,功能健全,有利于扩展。但是配置文件直接写在里面感觉很容易混成一团。所以按照PHP的逻辑把这一部分脱离开了。

2、我的代码

common中创建config.js配置文件

export default {
	title:'自己创造的写全局配置的方法',
	config_webside:'https://www.baidu.com/',
	obj:{
		title: '子对象',
	}
}

store下index.js

//模仿
import Vue from 'vue'
import Vuex from 'vuex'
import config from '../common/config.js'

Vue.use(Vuex)

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: '',
		globalWebside: 'http://139.224.194.158/'	,//http://www.loushizufang.com/以防这个网站备案失效
		config: config
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token = '';  
            state.userName = '';  
            state.avatarUrl = '';  
        }  
    }  
})

export default store

main.js

import Vue from 'vue'
import App from './App'
import store from './store'  

Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()


三、涉及知识与问题

weex怎么是原生编译呢?
nvue和weex的关系,为什么是vue的更快速版本,又补充了weex的什么缺点?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值