1. Common modules

Define a dedicated module to organize and manage these global variables and introduce them on the required page.

Note: This method can only be used between multiple VUE pages or nvUE pages, not between VUE and NVUE pages.

An example is as follows: Create a common directory under the uni-app project root directory, and then create base.js under the common directory to define common methods.

const websiteUrl = 'http://www.javanx.cn';  
const now = Date.now || function () {  
  return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
  return obj instanceof Array;  
};  

export default {  
  websiteUrl,  
  now,  
  isArray  
}
Copy the code

This module is then referenced in pages/index/index.vue

<script>  
import helper from '/common/base.js';  

export default {  
  data() {  
    return {};  
  },  
  onLoad(){  
    console.log('now:' + helper.now());  
  },  
  methods: {  
  }  
}  
</script>
Copy the code

This method is easy to maintain, but the disadvantage is that it needs to be introduced every time.

Vue. Prototype

Note This mode supports only multiple VUE pages or nvUE pages. Vue and NVUE pages are not shared.

An example is as follows: Mount properties/methods in main.js

Vue.prototype.websiteUrl = 'http://www.javanx.cn';  
Vue.prototype.now = Date.now || function () {  
  return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
  return obj instanceof Array;  
}; 
Copy the code

It is then called in pages/index/index.vue

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

This method is only defined in main.js and can be called directly on every page.

Note: 1. Do not repeat property or method names on each page.

2. It is recommended to mount properties or methods in Vue.prototype with a uniform prefix. Such as $url and global_url can also be easily distinguished from the content of the current page when reading code.

Third, globalData

This approach allows vUE and NVUE to share data. Is currently a better way for NVUE and VUE to share data.

Definition: App. Vue

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

GlobalData can be manipulated in js as follows:

Assignment:

getApp().globalData.text = 'test'
Copy the code

Values:

console.log(getApp().globalData.text)
// test
Copy the code

If you need to bind globalData data to a page, you can perform variable reassignment during the page’s onShow declaration cycle. Since HBuilderX 2.0.3, NVUE pages in uni-app compilation mode also support onshow.

Four, Vuex

Note This mode supports only multiple VUE pages or nvUE pages. Vue and NVUE pages are not shared.

This section takes updating user information synchronously after login as an example to briefly explain the usage of Vuex. For more detailed Vuex content, you are advised to visit the official website of Vuex.

For example:

Create a store directory under the uni-app project root directory and create index.js under the store directory to define the status value

const store = new Vuex.Store({  
  state: {  
    login: false.token: ' '.avatarUrl: ' '.userName: ' '  
  },  
  mutations: {  
    login(state, provider) {  
      console.log(state)  
      console.log(provider)  
      state.login = true;  
      state.token = provider.token;  
      state.userName = provider.userName;  
      state.avatarUrl = provider.avatarUrl;  
    },  
    logout(state) {  
      state.login = false;  
      state.token = ' ';  
      state.userName = ' ';  
      state.avatarUrl = ' '; }}})Copy the code

Next, you need to mount Vuex in main.js

import store from './store'  
Vue.prototype.$store = store  
Copy the code

Finally, use it in pages/index/index.vue

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

For a detailed example, download the attachment to run it in HBuilderX.

Example Procedure: If you do not log in, the system prompts you to log in. After jumping to the login page, click “Login” to obtain user information, synchronize and update the status, and return to the personal center to see the result of information synchronization.

Note: This approach is more suitable for global and value changing situations than the previous approach.

To learn more about VUEX, click here

conclusion

1..vue and.nvue are not specifications, so some scenarios that work in.vue do not work in.nvue.

2. Mount properties on Vue, cannot be used in.nvue.

Nvue does not support VUEX

4. If you want to reuse some methods with.vue and.nvue, you need to adopt the common module scheme, introduced in.vue and.nvue files respectively.

And finally, thank you for your support.

The original address: www.javanx.cn/20190826/un…