Comment charger les informations de base d'uniapp

Avec le développement rapide de l'Internet mobile, de plus en plus de développeurs espèrent développer plusieurs plateformes en même temps pour améliorer la couverture des projets et l'expérience utilisateur. À cette époque, Uniapp (nom complet : Universal Application) a vu le jour. Il s'agit d'un outil de développement multiplateforme basé sur Vue.js lancé par DCloud. Il peut être écrit une seule fois et publié sur plusieurs plateformes en même temps.

Dans Uniapp, les données sont un contenu très important et le chargement des données est nécessaire. Par exemple, nous devons charger certaines données de base dans la page pour afficher le contenu de la page, telles que des informations sur l'utilisateur, des informations sur le produit, etc. Alors, comment gérer le chargement de ces informations de base dans Uniapp ?

1. Traiter les données de base avant le chargement de la page

Dans Uniapp, nous pouvons traiter les données de base avant le chargement de la page. La méthode spécifique consiste à utiliser la fonction uni.showLoading() dans la fonction de cycle de vie de la page pour afficher l'animation de chargement et en même temps lancer une demande de données. Une fois la demande réussie, les données sont affectées aux données. attribut de la page. L'exemple de code est le suivant :

<script><br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { userInfo: {} } }, onShow() { //页面显示时触发 uni.showLoading({ //显示加载动画 title: '正在加载...' }); //发起数据请求 uni.request({ url: 'http://xxx.com/getUserInfo', success: (res) =&gt; { this.userInfo = res.data; //将数据赋值给data属性 uni.hideLoading(); //隐藏加载动画 } }); }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br></ script></p> <p>Le code ci-dessus est un exemple de traitement des données de base avant le chargement de la page. </p><p>2. Utilisez Vuex pour gérer les données globales</p><p>Si des données globales doivent être utilisées dans le projet, nous devons utiliser Vuex pour la gestion. Vuex est la bibliothèque officielle de gestion d'état pour Vue.js, qui peut gérer efficacement tous les états de l'application, y compris les données globales. </p><p>Dans Uniapp, nous pouvons créer l'objet magasin Vuex dans le fichier store.js et soumettre les méthodes en mutations via la méthode commit() pour changer l'état dans l'état. L'exemple de code est le suivant : </p><p>// store.js file<br>import Vue from 'vue'<br>import Vuex from 'vuex'</p><p>Vue.use(Vuex)</p><p>const store = new Vuex.Store({<br> state : {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>userInfo: {} //定义全局数据</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> mutations : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>setUserInfo(state, userInfo) { //设置全局数据的方法 state.userInfo = userInfo; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>})</p><p>exporter le magasin par défaut ;</p><p>//Fichier du module de page<br><template><br> <view></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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;'>&lt;text&gt;{{userInfo.nickname}}&lt;/text&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p></view><br> </ template></p><p><script><br> import { mapState } from 'vuex';</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>computed: mapState(['userInfo']), //映射state中的全局数据到页面data属性中 onShow() { uni.showLoading({ title: '正在加载...' }); //发起数据请求 uni.request({ url: 'http://xxx.com/getUserInfo', success: (res) =&gt; { this.$store.commit('setUserInfo', res.data); //通过Vuex改变全局数据 uni.hideLoading(); } }); }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br></script>

Le code ci-dessus est un exemple de gestion de données globales via Vuex .

3. Utilisez minix pour mélanger et traiter les données

Dans Uniapp, nous pouvons également utiliser minix pour le traitement des données. Les mixins sont une solution générale pour partager du code entre composants. Certaines méthodes de traitement des demandes de données couramment utilisées peuvent être extraites et mélangées dans la page pour améliorer la réutilisabilité du code.

La méthode spécifique consiste à définir la méthode de traitement des demandes de données dans le fichier minix, puis à l'introduire dans la page à l'aide de l'attribut mixins. L'exemple de code est le suivant :

//userInfoMixin.js file
export default {
data() {

return {
  userInfo: {}
}

},
méthodes : {

getUserInfo() { //定义数据请求方法
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.userInfo = res.data;
    }
  });
}

}
}

//page module file
< ;view>

<text>{{userInfo.nickname}}</text>