[TOC] ## 公用模塊 注意 1. 這種方式只支持多個vue頁面或多個nvue頁面之間公用，vue和nvue之間不公用。 根目錄創建 common/helper.js ``` const websiteUrl = 'http://uniapp.dcloud.io'; const now = Date.now || function () { return new Date().getTime(); }; const isArray = Array.isArray || function (obj) { return obj instanceof Array; }; export default { websiteUrl, now, isArray } ``` 使用 ``` <script> import helper from '../../common/helper.js'; export default { data() { return {}; }, onLoad(){ console.log('now:' + helper.now()); }, methods: { } } </script> ``` ## 掛載 Vue.prototype 在 main.js 中掛載屬性/方法 ``` Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io'; Vue.prototype.now = Date.now || function () { return new Date().getTime(); }; Vue.prototype.isArray = Array.isArray || function (obj) { return obj instanceof Array; }; ``` 使用 ``` <script> export default { data() { return {}; }, onLoad(){ console.log('now:' + this.now()); }, methods: { } } </script> ``` 注意: 1. 建議在 Vue.prototype 上掛載的屬性或方法，可以加一個統一的前綴。比如 $url、global_url ## globalData 注意: 1. globalData支持vue和nvue共享數據 2. globalData是一種比較簡單的全局變量使用方式 3. 如果需要把globalData的數據綁定到頁面上，可在頁面的onshow聲明周期里進行變量重賦值 在 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> /*每個頁面公共css */ </style> ``` 使用 ``` 賦值：getApp().globalData.text = 'test' 取值：console.log(getApp().globalData.text) // 'test' ``` ## Vuex 根目錄新建 store/index.js ``` 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 = ''; } } }) ``` 在 main.js 中進行掛載 ``` import store from './store' Vue.prototype.$store = store ``` 在 vue 中使用 ``` <script> import { mapState, mapMutations } from 'vuex'; export default { computed: { ...mapState(['avatarUrl', 'login', 'userName']) }, methods: { ...mapMutations(['logout']) } } </script> ```