The uni-app global variable

I. Common method module

Define a dedicated module to organize and manage these global variables and introduce them on the required page. Note: This approach only supports common use between multiple VUE pages or between multiple NVUE pages, not between VUE and NVUE.

Create the common directory under the uni-app project root and create a new utils.js to define the common methods.

Const now = Date. Now | | function () {return new Date (). The getTime ()} / / is obtained as of 1 January 1970 to the present moment the timestamp, But date.now () executes slightly faster than new.date ().getTime() and is negligible. const isArray = Array.isArray || function (obj) { return obj instanceof Array } export default { now, isArray }

Referring to this module:

<script> 
 import utils from 'common/utils.js'
 export default {
   data() { 
     return {} 
   }, 
   onLoad(){ 
     console.log('now:' + utils.now())
   },
   methods: { } 
 } 
</script>

It is easy to maintain, but needs to be introduced every time.

Add it to Vue.prototype

Add some oft-used constants or methods directly to Vue. Prototype, which each Vue instance inherits. Note: This method only supports VUE pages

Mount the properties/methods in main.js

Vue.prototype.now = Date.now || function () {
  return new Date().getTime()
} 

Call:

<script> 
  export default {
    data() { 
      return {}
    }, 
    onLoad(){
      console.log('now:' + this.now())
    }
  } 
</script>

Called directly on each page. A property or method mounted on Vue.prototype can be prefixed with a common prefix. An example is _now, which is easy to distinguish from the content of the current page.

Third, globalData

Small programs also have GlobalData, you can declare global variables on the App. Vue did not, but Uni-App introduced GlobalData and implemented it on H5, APP and other platforms. GlobalData can be defined in app.vue, and the API can be used to read and write this value. GlobalData supports VUE and NVUE sharing of data. GlobalData is an easy way to use global variables.

App.vue

<script> 
  export default { 
    globalData: { 
      text: 'Hello' 
    }, 
    onLaunch: function() { 
      console.log('App Launch') 
    }, 
    onShow: function() { 
      console.log('App Show') 
    }, 
    onHide: function() { 
      console.log('App Hide') 
    } 
  } 
</script> 

<style>
  /* 页面的公共css */ 
</style> 

GetApp ().globalData.text = ‘test’

Value: console.log(getApp().globalData.text) // ‘test’

To bind GlobalData data to a page, assign variables during the onShow declaration cycle of the page. Since HBuilderX 2.0.3, NVUE page also supports OnShow in uni-app compilation mode.

Four, Vuex

Vuex is the state management mode for Vue.js applications. HBuilderX 2.2.5+ supports sharing between VUE and NVUE. Example: create the store directory under the project root directory, and create a new index.js file:

const store = new Vuex.Store({ 
  state: { 
    login: false,
    token: '',
    userName: '' 
  }, 
  mutations: { 
    login(state, provider) {
      state.login = true
      state.token = provider.token
      state.userName = provider.userName
    }, 
    logout(state) { 
      state.login = false 
      state.token = ''
      state.userName = ''
    } 
  }
})

Mount Vuex in main.js

import store from './store' 
Vue.prototype.$store = store

use

<script> import { mapState, mapMutations } from 'vuex' export default { computed: { ... mapState(['login', 'userName']) }, methods: { ... mapMutations(['logout']) } } </script>

This approach is more suitable for global situations where values change than the previous approach.

Note: Attribute mounted on the VUE stereotype cannot be used in NVUE.