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)
