一、参考文章
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的什么缺点?