uniapp 電商app vuex的處理方案及注意事項

vuex：組件間數據通信

在電商app中，會有各種各樣的廣告，爲了能夠保證各個組件都能夠調用廣告信息，最簡單的處理方式就是通過vuex；

vuex的官方說法
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

以下從幾個相關文件的寫法入手，詳細介紹一下vuex的使用：

App.vue——app入口文件

所涉及到的知識點：

1. 應用的生命週期

函數名	說明
onLaunch	當uni-app 初始化完成時觸發（全局只觸發一次）
onShow	當 uni-app 啓動，或從後臺進入前臺顯示
onHide	當 uni-app 從前臺進入後臺
onError	當 uni-app 報錯時觸發
onUniNViewMessage	對 nvue 頁面發送的數據進行監聽

2. 將數據存儲到vuex中的函數放到onLaunch中。
3. 爲了讓界面更加整潔，將onLaunch中的函數放到另一個js文件中進行處理

<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>

applife.js——onLaunch執行函數

此文件中的知識點：
//加載廣告 requestAdvertSearchForMap().then(res=>{ store.commit('SET_ADVERT', res); });
此段代碼的意思是：調用requestAdvertSearchForMap接口，然後將獲取的res數據存儲到SET_ADVERT中，如果其他頁面需要使用廣告的數據，則可以通過this.$store.state.Advert.advert的方式進行獲取，或者通過this.$store.getters.GET_ADVERT也是可以獲取的。

/* 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"
import {requestAdvertSearchForMap} from "@/static/api/advert.js"
// #ifdef APP-PLUS
import APPUpdate from "@/static/common/appupdate/index.js"
import {initAlibaichuan} from "@/static/js/alibaichuan.js"
// #endif
/* 啓動app時執行 */
export function appOnLaunch(){
	console.log('啓動app')
	/* 加載系統配置 */
	requestSysConfig().then(res =>{
		store.commit('SET_SYS_CONFIG', res)
	});
	//加載廣告
	requestAdvertSearchForMap().then(res=>{
		store.commit('SET_ADVERT', res);
	});
	// 加載字典
	requestDicts().then(res=>{
		store.commit('SET_DICTS',res)
	});
	/* 加載用戶登錄信息 */
	doLoginFromCache(store.state.loginFrom.launch)
	// 檢測版本更新
	// #ifdef APP-PLUS
	    APPUpdate()
		/* 初始化阿里百川 */
		initAlibaichuan()
	// #endif
}
/* 進入/激活app時執行，每次進入到app都會執行 */
export function appOnShow(){
	console.log('appOnShow')
}
/* 隱藏app時執行，每次離開app都會執行此方法 */
export function appOnHide(){
	console.log(appOnHide)
}

main.js——主js文件

此文件中的知識點：
此文件中需要引入vue store等，然後掛載到app上

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

request 獲取廣告的api文件

import {request} from  '@/static/common/luch-request/index.js' 

// 查詢所有廣告管理，以唯一識別爲key
export function requestAdvertSearchForMap() {
	console.log("查詢所有廣告管理，以唯一識別爲key")
	let url = '/advert/search/for/map'
  return request.post( url );
}

對應的store中的廣告的js文件

const advert = {
  state: {
    advert: {}
  },
  mutations: {
    SET_ADVERT: (state, advert) => {
      state.advert = advert
    }
  },
  getters:{
	  GET_ADVERT: state => {
		  return state.advert
	  }
  }
}
export default advert

home.vue——app首頁的廣告獲取

此文件中的知識點：

1. 獲取廣告信息在watch和created兩個地方都是需要的，created函數中獲取廣告是爲了保證如果頁面一開始創建的時候就要從vuex中拿取數據。watch是爲了當vuex中的廣告信息發生改變的時候，自動刷新更改數據。兩者缺一不可。
2. created函數的代碼，我一開始放到了 onLoad函數中，在這個函數中如果調用vuex中的數據，很大部分是無法獲取到數據的，如果放到created函數中。
3. 注意在 watch監聽函數中寫屬性的方式：
   i. 屬性名用’’(英文單引號)包裹；
   ii. 雖然是監聽屬性，但是書寫方式是函數的形式，而且有兩個參數，newObj oldObj，一個是新數據，一個是老數據，當新老數據不一致的時候纔會執行代碼。
   iii. 監聽數據中的$store是不需要寫this的，但是在其他函數中是需要的，比如created函數中，還有就是在頁面渲染時，也是不需要使用this的。

watch: {
	'$store.state.Advert.advert':function(newObj,oldObj){
	    this.advert = newObj;
		console.log(this.advert,'store中的advert內容watch')
	}
},
created() {
	this.advert = this.$store.state.Advert.advert;
	console.log(this.advert,'store中的advert內容onload')
}

vuex我目前還沒有完全掌握，多多積累。