自创-在uniapp使用全局变量

waki

发布于 2021-12-08 09:11:17

2.5K00

代码可运行

文章被收录于专栏：wakiwaki

运行总次数：0

代码可运行

自创-在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()