uniapp页面传值总结
一、uni.navigateTo传值(1),直接传一个数字(2),传一个变量(3),传的值过长时(4),传两个及以上变量(5),地址是变量时传值pay.vue页面接收时二、通过缓存uni.setStorageSync(‘key’, value);//存uni.getStorageSync(‘key’); //取uni.removeStorageSync(‘key’) //移除三,组件之间子组件向父
·
一、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)
更多推荐
已为社区贡献1条内容
所有评论(0)