Let's talk about the delivery method of uniapp

Uniapp is a solution that provides cross-platform development. It allows us to write code once and run it on multiple platforms, such as iOS, Android and Web. For developers, this is a particularly good thing because it saves a lot of time and effort. In the development of Uniapp, we often need to transfer data and methods between pages, so this article will introduce you to some transfer methods.

1. Use Vuex to pass data

In Uniapp, we can use Vuex to share data. Vuex is a state management mode specially developed for Vue.js applications. It can manage Global data status. We can define state, mutations, actions, getters, etc. in the store to transfer data. In each component, if we need to obtain data, we only need to use mapState, mapMutations, mapActions, mapGetters and other functions to easily obtain and modify data.

Define state in the store.js file:

state:{
    count:0
},
mutations:{
    increment(state){//自增
        state.count++
    },
    decrement(state){//自减
        state.count--
    }
},
actions:{
    asyncIncrement({commit}){//异步自增
        setTimeout(()=>{
            commit('increment')
        },1000)
    },
    asyncDecrement({commit}){//异步自减
        setTimeout(()=>{
            commit('decrement')
        },1000)
    }
}

Obtain and modify data in the usage page:

import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
        }
    },
    computed:{
        ...mapState([
            'count'
          ])
    },
    methods:{
        ...mapMutations([
            'increment',
            'decrement'
        ]),
        ...mapActions([
            'asyncIncrement',
            'asyncDecrement'
        ])
    }
}

2. Use the uni.navigateBack parameter to pass

When the page jumps, we can use the parameter object in the uni.navigateBack method to pass data. This parameter is an Object type object and can be obtained when the next page is onLoaded.

On the sending page:

uni.navigateBack({
    delta:1,
    success(res){
        console.log('回跳成功')
    },
    fail(res){
        console.log('回跳失败')
    },
    complete(res){
        console.log('回跳完成')
    },
    animation:true,//使用动画返回
    aniationDuration:2000,//动画持续时间
    aniationType:'pop-out',//动画类型
    title:'返回页面',//导航栏标题
    formData:{//携带的参数
        id:1,
        name:'张三'
    }
})

On the receiving page:

onLoad:function(options){
    console.log(options)
    if(options.formData){
        this.formData = options.formData
    }
}

3. Use custom events for delivery

In Uniapp, we can use $ emit triggers custom events, and $on can be used in components to listen to these events. The event is triggered through $emit in the parent component. When the child component is called in the parent component, the child component object is passed through $emit, and then the object is listened to and received in the child component.

In the sending component:

methods：{
    sendEvent(){
        this.$emit('event',this.formData) //传递this.formData给监听方
    }
}

In the receiving component:

mounted(){
    this.$on('event',data=>{
        console.log(data) //接收数据并进行操作
    })
}

Summary:

The above are the commonly used delivery methods in Uniapp. For developers It is said that during development, it is necessary to flexibly choose different delivery methods and choose the easiest and most appropriate solution for different situations. It is worth mentioning that Vuex is one of the core functions of Uniapp. When transferring data between multiple components, using it is the most recommended approach to avoid performance losses caused by overly complex code.

The above is the detailed content of Let's talk about the delivery method of uniapp. For more information, please follow other related articles on the PHP Chinese website!