How uniapp implements passing data between pages

Uniapp implements how to transfer data between pages, requiring specific code examples

In uniapp development, transferring data between pages is a very common requirement. Through reasonable data transfer, we can achieve data sharing and interaction when page jumps. This article will introduce how to implement data transfer between pages in uniapp and give specific code examples.

1. Use URL parameters to pass data

Pending data through URL parameters is the most common and simplest way. By adding parameters in the URL of the jump link, data can be transferred between pages. The following is a sample code:

// Page A

<text>{{param}}</text>
<button @click="navigateToPageB">跳转至页面B</button>

<script><br>export default {<br> data() {</script>

return {
  param: 'Hello Uniapp'
}

},
methods: {

navigateToPageB() {
  uni.navigateTo({
    url: '/pages/pageB?pageParam=' + this.param
  })
}

}
}

// Page B

<text>{{pageParam}}</text>

<script><br>export default {<br> data() {</script>

return {
  pageParam: ''
}

},
onLoad(options) {

this.pageParam = options.pageParam

}
}

In page A, we jump to page B through the button click event and carry the parameter pageParam. In page B, the passed parameters are obtained through the onLoad life cycle function and assigned to pageParam, and then displayed on the page.

2. Use Vuex global state management

If you need to share data between multiple pages, using Vuex is a good choice. Vuex is a state management pattern developed specifically for Vue.js applications and can also be used in uniapp. Here is a sample code:

// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export default new Vuex.Store({
state: {

data: 'Hello Uniapp'

},
mutations: {

updateData(state, payload) {
  state.data = payload
}

},
actions: {} ,
getters: {}
})

// Page A

<text>{{data}}</text>
<button @click="navigateToPageB">跳转至页面B</button>

<script><br>import { mapState } from 'vuex'</script>

export default {
computed: {

...mapState(['data'])

} ,
methods: {

navigateToPageB() {
  this.$store.commit('updateData', 'Hello Page B')
  uni.navigateTo({
    url: '/pages/pageB'
  })
}

}
}

// Page B

<text>{{data}}</text>

<script><br>import { mapState } from 'vuex'</script>

export default {
computed: {

...mapState(['data'])

}
}

In this example, we use mapState in page A The helper function maps data in store to the data computed property of the current component. In the click event of page A, modify the data data in store through the commit method, and then jump to the page. Page B also uses the mapState auxiliary function to map data in store to the current component.

Summary:

The above two methods are common methods for uniapp to transfer data between pages. URL parameter transfer of data is simple and clear, suitable for situations where the amount of data is small; while using Vuex is suitable for situations where data needs to be shared among multiple pages. Choosing the appropriate method to transfer data between pages based on actual needs can improve development efficiency and user experience.

The above is the detailed content of How uniapp implements passing data between pages. For more information, please follow other related articles on the PHP Chinese website!