uniapp页面传值总结

一、uni.navigateTo传值
(1)，直接传一个数字

uni.navigateTo({
	url:'../../pages/page/pay?number=1'
})

(2)，传一个变量

uni.navigateTo({
	url:'../../pages/page/pay?title='+ this.title
})

(3),传的值过长时

uni.navigateTo({
url:'../../pages/page/pay?list=' + encodeURIComponent(JSON.stringify(this.getList))
})

(4)，传两个及以上变量

uni.navigateTo({
url:"../../pages/page/pay?list="+encodeURIComponent(JSON.stringify(this.getList))+ '&allprice=' +this.getAllPrice
})

(5)，地址是变量时传值

uni.navigateTo({
url: k+'?RoomNo=' + this.RoomNo
})

pay.vue页面接收时

onLoad(e){
this.number = e.number
this.title = JSON.parse(e.title)
this.list = JSON.parse(decodeURIComponent(e.list))
}

二、通过缓存
uni.setStorageSync(‘key’, value); //存
uni.getStorageSync(‘key’); //取
uni.removeStorageSync(‘key’) //移除

三、组件之间
子传父:

this.$emit("function",param)

父传子
利用props

props: {
		//list接收父组件传过来数据
		list: {
			type: Array,
			value: [] 
		},
	},

四、App.vue中配置globalData

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

页面中使用

var app = getApp();
this.version = app.globalData.version;

五、通过vuex全局数据管理
第一步，创建store文件夹
里面包含modules文件夹和index.js
index.js //modules文件夹下的所有js模块都可以在index.js所引入

import Vue from "vue"
import Vuex from "vuex"
import user from "./modules/user.js"

Vue.use(Vuex)

export default new Vuex.Store({
		modules:{
			user
		}
})

modules文件夹下的 user.js

export default {
	state:{
		// 登录状态
		loginStatus:false,
		// 用户token
		token:"",
		// 用户信息
		userInfo:{}
	},
	getters:{},
	mutations:{
		// 初始化登录状态
		initLogin(state,userInfo){
			console.log("用户初始化")
			if(userInfo){
				state.loginStatus = true
				state.userInfo = userInfo 
			}
		},
		// 登录
		login(state,data){
			state.userInfo = data.data.data
			state.loginStatus = true
			state.token = data.header.Authorization
			uni.setStorageSync("token",data.header.Authorization)
			uni.setStorageSync("userInfo",data.data.data)
		},
		// 退出登录
		logOut(state){
			state.loginStatus = false
			state.userInfo = {}
			state.token = ""
		}
	},
	actions:{}
}

第二步、在main.js挂载

import Vue from 'vue'
import App from './App'
import store from './store/index.js'

Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
    ...App,
    store
})
app.$mount()

第三步、在页面使用

this.$store.commit('initLogin', userInfo)