How to load basic information of uniapp

With the rapid development of mobile Internet, more and more developers hope to develop multiple platforms at the same time to improve project coverage and user experience. At this time, Uniapp (full name: Universal Application) came into being. It is a cross-platform development tool based on Vue.js launched by DCloud. It can be written once and published to multiple platforms at the same time.

In Uniapp, data is very important content, and data loading is necessary. For example, we need to load some basic data into the page to display the content of the page, such as user information, product information, etc. So, how to handle the loading of these basic information in Uniapp?

1. Process basic data before page loading

In Uniapp, we can process basic data before page loading. The specific method is to use the uni.showLoading() function in the life cycle function of the page to display the loading animation, and at the same time initiate a data request. After the request is successful, the data is assigned to the data attribute of the page. The sample code is as follows:

export default {

data() {
  return {
    userInfo: {}
  }
},
onShow() { //页面显示时触发
  uni.showLoading({ //显示加载动画
    title: '正在加载...'
  });
  //发起数据请求
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.userInfo = res.data; //将数据赋值给data属性
      uni.hideLoading(); //隐藏加载动画
    }
  });
}

}

The above code is an example of processing basic data before the page is loaded.

2. Use Vuex to manage global data

If global data needs to be used in the project, we need to use Vuex for management. Vuex is the official state management library of Vue.js, which can effectively manage all states in the application, including global data.

In Uniapp, we can create the Vuex store object in the store.js file and submit the methods in mutations through the commit() method to change the state in the state. The sample code is as follows:

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

Vue.use(Vuex)

const store = new Vuex.Store({
state: {

userInfo: {} //定义全局数据

},
mutations: {

setUserInfo(state, userInfo) { //设置全局数据的方法
  state.userInfo = userInfo;
}

}
})

export default store;

//Page module file

<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">Copy after login</div></div><p>}<br></script>

The above code is an example of managing global data through Vuex.

3. Use minix to mix and process data

In Uniapp, we can also use minix for data processing. Mixins are a general solution for sharing code between components. Some commonly used data request processing methods can be extracted and mixed into the page for use to improve code reusability.

The specific method is to define the data request processing method in the minix file, and then introduce it in the page using the mixins attribute. The sample code is as follows:

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

return {
  userInfo: {}
}

},
methods: {

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

}
}

//Page module file