uniapp 電商APP App.vue main.js store等文件的處理方案

App.vue

<script>
	import {appOnLaunch,appOnShow,appOnHide} from '@/static/js/applife.js'
	export default {
		onLaunch: function() {
			appOnLaunch()
		},
		onShow: function() {
			appOnShow()
		},
		onHide: function() {
			appOnHide()
		}
	};
</script>

<style lang="scss">
	/* H5端引用。玄學問題，我這邊在這裏引入的css，在APP上無效。前面加/也一樣。原因未知...
	可自行測試在APP上是否有效，如果有效，可在vue裏刪除css引入的代碼。 */
	/* #ifndef APP-PLUS */
		@import "./static/colorui/main.css";
		@import "./static/colorui/icon.css";
		@import "./static/zaiui/style/app.scss";
	/* #endif */
	@import "./static/css/app.css";
	@import "./static/font/good/icon.css";
	/* 項目css */
</style>
//app.vue中存放的是應用的聲明周期函數，最好是隻使用以上三個生命週期函數，而且在使用過程中，最好是封裝到另一個js文件中，在app.vue中只實現引用即可。
//以下爲引用的文件
/* app生命週期處理 */
import {requestSysConfig} from "@/static/api/config.js"
import store from '@/store/index.js'
import {requestGoodsCateByID} from "@/static/api/goodsCate.js"
import {doLoginFromCache} from '@/static/api/login.js'
import {requestDicts} from "@/static/api/dicts.js"


/* 啓動app時執行 */
export function appOnLaunch(){
	console.log('啓動app');
	/* 加載系統配置 */
	requestSysConfig().then(res =>{
		store.commit('SET_SYS_CONFIG', res)
	});
	// 加載字典
	requestDicts().then(res=>{
		store.commit('SET_DICTS',res);
	});
	/* 加載用戶登錄信息 */
	doLoginFromCache(store.state.loginFrom.launch);
}

/* 進入/激活app時執行，每次進入到app都會執行 */
export function appOnShow(){
	console.log('appOnShow');
}

/* 隱藏app時執行，每次離開app都會執行此方法 */
export function appOnHide(){
	console.log(appOnHide)
}

main.js

import Vue from 'vue'
import App from './App'
import Request from '@/static/common/luch-request/index.js' 
import store from '@/store/index.js'

Vue.config.productionTip = false

App.mpType = 'app'
const app = new Vue({
	...App,
	store
})
app.$mount()

store文件夾

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions.js'
import mutations from './mutations.js'
import state from './states.js'
// import Router,{RouterMount} from 'uni-simple-router';
// Vue.use(Router)
Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
	// set './app.js' => 'app'
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = modulesFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {})

const store = new Vuex.Store({
	state,
	modules,
	getters,
	actions,
	mutations
})

export default store