How uniapp implements passing data between pages-uni-app-php.cn

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.

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>

Copy after login

// Page B

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.

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'

Copy after login

},
mutations: {

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

Copy after login

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

// Page A

// Page B