uni-app全局变量的存储和页面数据之间的传递

https://ask.dcloud.net.cn/article/35021

1、变量存储

1.1使用公用模块存储 (就是一个公共的页面)

定义一个专用的模块页面，用来组织和管理这些全局的变量，也可以是方法，在需要的页面引入。

注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。

示例如下：
在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 a.js 文件然后导出（暴露出去）

// a.js 文件
const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const str = "blablabla~";
// 元素导出
export default {  
    websiteUrl,  
    now,  
    str, 
}

导入引用方式

在需要的文件中引用该模块

<script>  
	// 根据所在目录导入
    import a from './common/a.js';  

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + a.now());  
        },  
        methods: {  
        }  
    }  
</script>

1.2 挂载到 Vue.prototype存储

将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来，这样就可以在任意的vue文件中进行引用

注意这种方式只支持vue页面，每个页面中不要在出现重复的属性或方法名。

// 第一种直接挂载
Vue.prototype.$websiteUrl = 'http://uniapp.dcloud.io';

// 第二种将其他的文件挂载
import { a } from './a.js' 
Vue.prototype.$a = a

文件a种的内容

export const a = (sth) => { 
  return sth;
}

引用方式

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + this.$websiteUrl);  // 第一种
            console.log('now:' + this.$a(balabala)); // 第二种
            // 打印输出
			// http://uniapp.dcloud.io
			// balabala  
        },  
        methods: {  
        }  
    }  
</script>

1.3使用globalData存储

官方文件：https://uniapp.dcloud.io/collocation/App.html#globaldata
小程序中有个globalData概念，可以在 App 上声明全局变量。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。
在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。

globalData支持vue和nvue共享数据。

globalData是一种比较简单的全局变量使用方式。

在app.vue中定义

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
</style>  

js中操作globalData的方式如下：

赋值：getApp().globalData.text = 'test'

取值：console.log(getApp().globalData.text) // 'test'

如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在uni-app编译模式下，也支持onshow。

1.4 使用vuex状态管理存储

uniapp官方说明：https://uniapp.dcloud.io/tutorial/vue3-vuex.html#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

uni-app 内置了 Vuex

HBuilderX 2.2.5+起，支持vue和nvue之间共享。说明

这里以登录后同步更新用户信息为例，简单说明下 Vuex 的用法，更多更详细的 Vuex 的内容，建议前往其官网 Vuex 学习下。我的vuex学习笔记

使用说明：

在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建index.js定义状态值

// 页面路径：store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state:{//存放状态
		"username":"foo",
		"age":18
	}
})
export default store

在 main.js 中导入文件。然后，需要在 main.js 挂载 Vuex

// 页面路径：main.js
import Vue from 'vue'
import App from './App'

// 在 main.js 挂载 Vuex
import store from './store'
Vue.prototype.$store = store

// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
	store,
	...App
})
app.$mount()

引用方式1: 通过属性访问，需要在根节点注入 store 。

<!-- 页面路径：pages/index/index.vue -->
<template>
	<view>
		<text>用户名：{{username}}</text>
	</view>
</template>
<script>
	import store from '@/store/index.js';//需要引入store
	export default {
		data() {
			return {
				// 直接就可以拿到state中的状态值
				username:store.state.username 
			}
		}
	}
</script>

引用方式2 ：组件中使用，通过this.$store.state.值访问到 state 里的数据。

<!-- 页面路径：pages/index/index.vue -->
<template>
	<view>
		<text>用户名：{{username}}</text>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 直接就可以拿到state中的状态值
				username:this.$store.state.username 
			}
		}
	}
</script>

vuex常用于：
未登录时，提示去登录。跳转至登录页后，点击“登录”获取用户信息，同步更新状态后，返回到个人中心即可看到信息同步的结果。
对比前面的方式，该方式更加适合处理全局的并且值会发生变化的情况。

vue 和 .nvue 并不是一个规范，因此一些在 .vue 中适用的方案并不适用于 .nvue。 Vue 上挂载属性，不能在 .nvue 中使用。

2、数据的传递

2.1URL的方式传递

在uniapp页面与页面之间的跳转时候，需要传递数据，一般我们通过URL的方式进行传递; 官方编程导航链接

例如：（官方示例）

在url中使用字符串拼接的方式，如果有变量使用➕号拼接

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'+ "&sex=" + this.sex
});

数据的接收：

// 在test.vue页面接受参数
export default {
	onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

提示：
url有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用encodeURIComponent对参数进行编码的示例。

2.2 使用全局变量的方式

见上变量的存储；根据项目的需求进行选用。

2.3 使用本地缓存的方式进行传递使用

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
可以直接将需要传递的数据本地存储起来，但是这种方法有很多弊端，只有在适合的情况下才能使用

使用方式

设置缓存
uni.setStorage(OBJECT). uni.setStorageSync(KEY,DATA)
从本地缓存中异步获取指定 key 对应的内容。
uni.getStorage(OBJECT) uni.getStorageSync(KEY)