前言:
uniapp中页面跳转可以说主要有两种方式,第一种是uni.navigateTo,第二种是uni.switchTab,这两个的区别在于:
navigateTo是保留当前页面,跳转到应用内的某个页面,并且跳转的页面不能在pages.json页面中注册,他是可以以querystring的方式带参数的(例如:'path?key=value&key2=value2')。
switchTab是跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,跳转的页面需在pages.json页面中注册,路径后不能带参数。
这时候我们要想在tabbar之间切换的时候还要能访问前一个tabbar的数据这时候怎么办呢?在vue中,必然果断vuex,所以uni-app也支持这种。下面就方法进行总结
目录

1.vuex的方法
因为uni-app是基于vue的,所以vue的全局状态管理vuex也是可以的。但是因为uni中本身集成了vuex,所以咱们只需要建一个store的文件夹就好了。
1.1新建store文件夹
在根目录src下新建store文件夹,之后在文件夹内新建index.js文件
1.2定义数据以及公共方法函数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
state:{
myDataGlobal:{}
},
mutations:{
//向myDataGlobal中填新值
addData(state,dataGlo){
state.myDataGlobal=dataGlo;
}
},
actions:{
}
})
export default store
1.3在main函数中注册
这里头需要把vuex注册为全局组件,方便this.$store的调用。(这个在vue中不用啊,我记得在vue实例中挂载了store后直接就能this.$store了啊,这个有知道的大神希望评论区留言哈。)
之后就可以按和Vue中一样方式的开始愉快的玩耍了。。。
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
// 引入uview库
import uView from "uview-ui";
//引入vuex
import store from './store/index.js'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.use(uView);
App.mpType = 'app'
const app = new Vue({
...App,
//挂载vuex
store
})
app.$mount()
2.利用缓存StorageSync
在需要传递数据的vue组件中向缓存中写入数据,第一个参数是名字,第二个参数就是你要传递的数据。
uni.setStorageSync('setData',this.myData);
在需要获取的Vue组件中获取数据。
//接收用户设置的基本数据
this.myData=uni.getStorageSync('setData');
这种方式亲测也是可用的。但是使用的时候也一定要注意生命周期的问题,有些钩子函数只渲染一次。
具体使用参考官方:https://uniapp.dcloud.io/api/storage/storage?id=removestoragesync
3.globalData
小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。
globalData是简单的全局变量,如果使用状态管理,请使用vuex
(main.js中定义),这个方式说实话我没弄成功,不知道为什么,理论上也是可以的应该。
官方链接:https://uniapp.dcloud.io/collocation/App?id=globaldata
小结:当然在这三个方式中,有vuex肯定优先vuex啊,毕竟vue自家的,用的也舒服。没有vuex再考虑其他两种吧。这个由于比较简单,也不存在坑不坑的问题,就是一定要注意生命周期钩子函数的执行方式以及次数。我就因为忘了这个事了,好几次都获取数据失败,一度还怀疑方法不行。哈哈