Uniapp nécessite des exemples de code spécifiques pour implémenter la façon de transférer des données entre les pages
Dans le développement d'Uniapp, le transfert de données entre les pages est une exigence très courante. Grâce à un transfert de données raisonnable, nous pouvons réaliser le partage de données et l'interaction lorsque les pages sautent. Cet article expliquera comment implémenter le transfert de données entre les pages dans uniapp et donnera des exemples de code spécifiques.
- Utilisez les paramètres d'URL pour transmettre des données
Les paramètres d'URL sont le moyen le plus courant et le plus simple de transmettre des données. En ajoutant des paramètres dans l'URL du lien de saut, les données peuvent être transférées entre les pages. Voici un exemple de code :
// Page A
<text>{{param}}</text>
<button @click="navigateToPageB">跳转至页面B</button>Copier après la connexion
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return {
param: 'Hello Uniapp'
}</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> méthodes : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>navigateToPageB() {
uni.navigateTo({
url: '/pages/pageB?pageParam=' + this.param
})
}</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>
// Page B
<text>{{pageParam}}</text>Copier après la connexion
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return {
pageParam: ''
}</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> onLoad(options) {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>this.pageParam = options.pageParam</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>
Dans la page A, on passe le bouton L'événement click passe à la page B et porte le paramètre pageParam. Dans la page B, les paramètres transmis sont obtenus via la fonction de cycle de vie onLoad et attribués à pageParam, puis affichés sur la page. pageParam。在页面B中，通过onLoad生命周期函数获取传递过来的参数并赋值给pageParam，然后在页面展示。
- 使用Vuex全局状态管理
如果需要在多个页面间共享数据，使用Vuex是一种不错的选择。Vuex是一个专为Vue.js应用程序开发的状态管理模式，也可以在uniapp中使用。下面是一个示例代码：
// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data: 'Hello Uniapp'
Copier après la connexion
},
mutations: {
updateData(state, payload) {
state.data = payload
}Copier après la connexion
},
actions: {},
getters: {}
})
// 页面A
<text>{{data}}</text>
<button @click="navigateToPageB">跳转至页面B</button>Copier après la connexion
<script><br>import { mapState } from 'vuex'</p><p>export default {<br> computed: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>...mapState(['data'])</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>},<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>navigateToPageB() {
this.$store.commit('updateData', 'Hello Page B')
uni.navigateTo({
url: '/pages/pageB'
})
}</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>
// 页面B
<text>{{data}}</text>Copier après la connexion
<script><br>import { mapState } from 'vuex'</p><p>export default {<br> computed: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>...mapState(['data'])</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></p>
<p>在这个示例中，我们在页面A中使用<code>mapState</code>辅助函数将<code>store</code>中的<code>data</code>映射到当前组件的<code>data</code>计算属性中。在页面A的点击事件中，通过<code>commit</code>方法修改<code>store</code>中的<code>data</code>数据，然后进行页面跳转。页面B中同样使用<code>mapState</code>辅助函数映射<code>store</code>中的<code>data</code></p>
<ol start="2">Utilisez la gestion globale de l'état de Vuex<p></p>
<p>Si vous avez besoin de partager des données entre plusieurs pages, utiliser Vuex est un bon choix. Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js et peut également être utilisé dans Uniapp. Voici un exemple de code : </p>🎜//store/index.js🎜import Vuex from 'vuex'🎜import Vue from 'vue'🎜🎜Vue.use(Vuex)🎜🎜export default new Vuex.Store({🎜 state : {🎜rrreee🎜},🎜 mutations : {🎜rrreee🎜},🎜 actions : {},🎜 getters : {}🎜})🎜🎜// Page A🎜<template>🎜 <view>🎜rrreee🎜🎜</view></template>🎜🎜<script>🎜import { mapState } depuis 'vuex'🎜🎜export par défaut {🎜 calculé : {🎜rrreee🎜},🎜 méthodes : {🎜rrreee🎜}🎜}🎜< ;/script>🎜🎜// Page B🎜<template>🎜 <view>🎜rrreee🎜🎜🎜🎜<script>🎜import { mapState } depuis 'vuex'🎜 🎜export default {🎜 calculé : {🎜rrreee🎜}🎜}🎜</script>🎜🎜Dans cet exemple, nous utilisons la fonction d'assistance mapState dans la page A pour stocker data dans code> est mappé à la propriété calculée data du composant actuel. Dans l'événement click de la page A, modifiez les données data dans store via la méthode commit, puis accédez à la page. La page B utilise également la fonction auxiliaire mapState pour mapper les données du store au composant actuel. 🎜🎜Résumé : 🎜🎜Les deux méthodes ci-dessus sont des méthodes courantes permettant à Uniapp de transférer des données entre les pages. Le transfert de données via des paramètres URL est simple et clair et convient aux situations où la quantité de données est faible, tandis que l'utilisation de Vuex convient aux situations où les données doivent être partagées entre plusieurs pages. Choisir la méthode appropriée pour transférer des données entre les pages en fonction des besoins réels peut améliorer l'efficacité du développement et l'expérience utilisateur. 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
