事件總線v-show，export，vuex，$store，commit，mapState，vender，devtool調(diào)試工具
例子1：用v-show實(shí)現(xiàn)在電影界面組件時(shí)，導(dǎo)航欄組件顯示，當(dāng)進(jìn)入電影詳情界面組件的時(shí)候，導(dǎo)航欄組件隱藏的效果。
個(gè)人理解：要注意的是鉤子函數(shù)（生命周期函數(shù)）是很常用的。在電影詳情界面組件中的beforeMount（這個(gè)beforeMount生命周期函數(shù)在電影詳情界面組件被掛載前，會(huì)自動(dòng)觸發(fā)beforeMount里面的代碼）中寫隱藏導(dǎo)航欄的代碼，beforeDestroy（在組件被銷毀前，也就是切換掉這個(gè)電影詳情界面組件前自動(dòng)觸發(fā)beforeDestroy這個(gè)鉤子函數(shù)中的代碼）
通常我們組件的傳值中，父?jìng)髯油ㄟ^props屬性來傳遞參數(shù)，子傳父通過emit來傳遞參數(shù)。
但是我們常常會(huì)用上“事件總線”（適合小項(xiàng)目）
下面的bus文件夾就是和“事件總線”有關(guān)的"bus總線"
個(gè)人認(rèn)為”事件總線“還是很方便使用的（其實(shí)我認(rèn)為很多東西的優(yōu)點(diǎn)，高效之處就是很方便使用）
記得使用事件總線的文件都要引入bus文件夾中的index.js文件，
import?bus?from?'@/bus/index'可以略寫成import?bus?from?'@/bus'
bus目錄下的index.js
Detail.vue
App.vue
例子2：用vuex（適合大項(xiàng)目時(shí)使用）實(shí)現(xiàn)在電影界面組件時(shí)，導(dǎo)航欄組件顯示，當(dāng)進(jìn)入電影詳情界面組件的時(shí)候，導(dǎo)航欄組件隱藏的效果。
下面的state，mutations，??actions，getters就是Store中的4大配置項(xiàng)。
在使用vuex中的store時(shí)，記得要在src目錄下的main.js中通過寫上import?store?from?'./store'來導(dǎo)入store，并且在new?Vue中聲明store，這樣在App.vue里面的<template></template>才可以直接用$store.state.isShowBar來調(diào)用src目錄下的store.js中的new?Vuex.Store中的state中的isShowBar對(duì)應(yīng)的值。
其實(shí)在src目錄下的main.js中的new?Vue中聲明store，“store”是“store:store”的簡(jiǎn)寫。
Detail.vue
App.vue
main.js
store.js
例子3：實(shí)現(xiàn)用export導(dǎo)出變量后使用的幾種方法（export規(guī)則），用mapState簡(jiǎn)化$store.state.isShowBar為isShowBar就可以調(diào)用isShowBar的值
下面是用export導(dǎo)出變量后使用的幾種方法（export規(guī)則）
export導(dǎo)出變量等后，在App.vue中使用import和解構(gòu)語法等等，在mounted這個(gè)鉤子函數(shù)中就可以直接用console.log的打印語句就可以打印處其變量等等。
下面就是我認(rèn)為常用的export導(dǎo)出函數(shù)并且使用函數(shù)的方法
簡(jiǎn)化獲取vuex屬性的代碼：mapState簡(jiǎn)化$store.state.isShowBar，添加城市cityid
個(gè)人對(duì)...mapState(['isShowBar'])和...擴(kuò)展運(yùn)算符的理解
例子3中的代碼和例子2差不多，就是App.vue做出了些改變，下面是代碼
App.vue
例子4：用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存，實(shí)現(xiàn)第一次用后臺(tái)獲取數(shù)據(jù)后，把數(shù)據(jù)緩存，之后前臺(tái)就不用重復(fù)從后臺(tái)獲取數(shù)據(jù)，而是從緩存中獲取數(shù)據(jù)（解決如果每次都后臺(tái)獲取數(shù)據(jù)，會(huì)感覺每次請(qǐng)求數(shù)據(jù)都很慢等等的問題）
個(gè)人認(rèn)為獲取緩存的數(shù)據(jù)的話會(huì)直接請(qǐng)求數(shù)據(jù)要快，不用擔(dān)心獲取的緩存數(shù)據(jù)一直不變，因?yàn)榈诙炷愠霈F(xiàn)開啟服務(wù)器等等后重新直接請(qǐng)求數(shù)據(jù)后，每次獲取緩存的數(shù)據(jù)就發(fā)生改變了
Comingsoon.vue
store.js
例子5：安裝并且使用調(diào)試工具devtools（也就是vender）的方法
例子1：用v-show實(shí)現(xiàn)在電影界面組件時(shí)，導(dǎo)航欄組件顯示，當(dāng)進(jìn)入電影詳情界面組件的時(shí)候，導(dǎo)航欄組件隱藏的效果。
個(gè)人理解：要注意的是鉤子函數(shù)（生命周期函數(shù)）是很常用的。在電影詳情界面組件中的beforeMount（這個(gè)beforeMount生命周期函數(shù)在電影詳情界面組件被掛載前，會(huì)自動(dòng)觸發(fā)beforeMount里面的代碼）中寫隱藏導(dǎo)航欄的代碼，beforeDestroy（在組件被銷毀前，也就是切換掉這個(gè)電影詳情界面組件前自動(dòng)觸發(fā)beforeDestroy這個(gè)鉤子函數(shù)中的代碼）
App.vue中寫的是導(dǎo)航欄的組件
通常我們組件的傳值中，父?jìng)髯油ㄟ^props屬性來傳遞參數(shù)，子傳父通過emit來傳遞參數(shù)。
但是我們常常會(huì)用上“事件總線”(適合小項(xiàng)目）
下面的bus文件夾就是和“事件總線”有關(guān)的“bus總線”
記得使用事件總線的文件都要引入bus文件夾中的index.js文件，
import?bus?from?'@/bus/index'可以略寫成import?bus?from?'@/bus'
個(gè)人認(rèn)為“事件總線”還是很方便使用的（其實(shí)我認(rèn)為很多東西的優(yōu)點(diǎn)，高效之處就是很方便使用）
bus目錄下的index.js
//?src/bus/index.js
import?Vue?from?'vue'
//?全局?jǐn)?shù)據(jù)通過bus控制
const?bus?=?new?Vue()
export?default?bus
Detail.vue
<template>
??<!--?<h1>顯示電影詳情{{$route.params.n1}}</h1>?-->
??<div?v-if="filminfo"?>
??<!--?<div?id="divId1">?-->
????<img?:src="filminfo.poster"?class="poster"?/>
?<!--?</div>?-->
<!--?<div?id="divId2">?-->
????<h2>{{filminfo.name}}?{{filminfo.grade}}</h2>
????<h3>演職人員</h3>
????<swiper?class="actorsSwiper"?swipername="actorsSwiper"?pageSize="4">
??????<div?class="swiper-slide"?v-for="actor?in?filminfo.actors"
????????:key="actor.name">
????????<img?:src="actor.avatarAddress"?/>
????????<p>{{actor.name}}</p>
??????</div>
????</swiper>
????<h3>劇照</h3>
????<swiper?class="photosSwiper"?swipername="photosSwiper"?pageSize="3">
??????<div?class="swiper-slide"?v-for="(data,index)?in?filminfo.photos"
????????:key="index">
????????<img?:src="data"?/>
??????</div>
????</swiper>
??</div>
<!--?
??</div>?-->
</template>
<script>
import?axios?from?'axios'
import?swiper?from?'@/views/Detail/DetailSwiper'
//事件總線部分?START
import?bus?from?'@/bus'
//事件總線部分?END
export?default?{
??data?()?{
????return?{
??????filminfo:?null
????}
??},
??components:?{
????swiper
??},
??mounted?()?{
????// 這里獲取的n1參數(shù)的內(nèi)容就是電影的id
?????const?id?=this.$route.params.n1
????//?console.log(this.$route.params.n1)
??????axios({
??????url:?`/mz/gateway?filmId=${id}&k=4359832`,
??????headers:?{
????????'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????????'X-Host':?'mall.film-ticket.film.info'
??????}
????}).then(res?=>?{
??????this.filminfo?=?res.data.data.film
??????//?console.log(JSON.stringify(this.filminfo))
????})
??
??}
??
??//事件總線部分?START
????,
??beforeMount(){
???bus.$emit('performBar',?false)
????//?this.$store.commit('hideTabbar',?false)
??},
??beforeDestroy?()?{
??bus.$emit('performBar',?true)
????//?this.$store.commit('showTabbar',?true)
??}
??
????// 事件總線部分?END
??}
// 自己加的代碼?START
//自己加的代碼?END
</script>
<style?lang="scss"?scoped>
//poster就是電影海報(bào)的圖片：
??.poster?{
//??height:400px;
????width:?100%;
//??position:absolute;
//?clip:rect(20px,550px,5200px,0px);
??overflow:?hidden;
??}
//?#divId1{
//? position:?absolute;
// clip:rect(20px,100%,100%,0px);
//??top:-50%;
// height:?50px;
//? width:?100%;
//? border:?1px?solid?red;
// }
//?#divId2{
// position:?absolute;
// top:50%;
// height:?50px;
// width:?100%;
// border:?1px?solid?red;
//??}
//?#divAll{
// position:?absolute;
//? top:-50%;
// height:?50px;
// width:?100%;
// border:?1px?solid?red;
// }
</style>
App.vue
<template>
??<div?id="app">
<!--?<img?src="./assets/logo.png">?-->
<!--?自己加的代碼?START?-->
<!--?
?<tabbar?id="id1"/>??-->
??
????<!--?<tabbar?v-show="$store.state.isShowBar"/>?-->
?<tabbar?v-show="isShowBar"/>
?<!--?<tabbar?/>??-->
<!--?使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?START?-->
<!--?<his>
??????<label>詩書畫唱</label>
????????<label?slot="header">Hit.vue這個(gè)插槽組件中slot="header"（頁眉）的內(nèi)容</label>
??????<p?slot="footer">Hit.vue這個(gè)插槽組件中slot="footer"（頁腳）的內(nèi)容</p>
????
????</his>?-->
<!--?使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?END?-->
?<!--?<img?src="http://127.0.0.1:9001/public/a1.png"?/>?-->
<!--?<My/>?-->
<!--?自己加的代碼?END?-->
????<router-view/>
??</div>
</template>
<script>
//自己加的代碼?START
//使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?START?
//?import?his?from?'@/components/His'
//?使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?END?
//事件總線部分?START
//import?bus?from?'@/bus/index'可以略寫成import?bus?from?'@/bus'
import?bus?from?'@/bus'
//事件總線部分?END
//?import?{?mapState?}?from?'vuex'
import?tabbar?from?'@/components/Tabbar'
//?import?my?from?'@/components/My'
//自己加的代碼?END
export?default?{
??name:?'App',
??//自己加的代碼?START
???data?()?{
????return?{
????isShowBar:?true
????}
??},
??components:?{
????//?his
???tabbar
????//?My
??},
//事件總線部分?START
??mounted?()?{
????//?當(dāng)發(fā)送給你performBar這個(gè)暗號(hào)時(shí)，
????//?就將isShowBar屬性的值修改為data
????bus.$on('performBar',?(data)?=>?{
??????this.isShowBar?=?data
????})
??},
??//事件總線部分?END
??//?computed:?{
??//???...mapState(['isShowBar'])
??//?}
??//自己加的代碼?END
}
</script>
<!--源代碼?START
<style>
#app?{
??font-family:?'Avenir',?Helvetica,?Arial,?sans-serif;
??-webkit-font-smoothing:?antialiased;
??-moz-osx-font-smoothing:?grayscale;
??text-align:?center;
??color:?#2c3e50;
??margin-top:?60px;
}
</style>
源代碼?END-->
<!-- 自己加的SASS的代碼?START -->
<style?lang="scss">
??*?{
????margin:?0;
????padding:?0;
????//??text-align:?center;
??}
??html?{
????height:?100%;
??}
??li?{
????list-style:?none;
????
??}
//???#id{
//?z-index:?1;
//?position:?fixed;
//???}
</style>
<!--自己加的SASS的代碼?END-->
例子2：用vuex（適合大項(xiàng)目時(shí)使用）實(shí)現(xiàn)在電影界面組件時(shí)，導(dǎo)航欄組件顯示，當(dāng)進(jìn)入電影詳情界面組件的時(shí)候，導(dǎo)航欄組件隱藏的效果。
npm install vuex --save
下面的state，mutations，??actions，getters就是Store中的4大配置項(xiàng)
在使用vuex中的store時(shí)，記得要在src目錄下的main.js中通過寫上import?store?from?'./store'來導(dǎo)入store，并且在new?Vue中聲明store，這樣在App.vue里面的<template></template>才可以直接用$store.state.isShowBar來調(diào)用src目錄下的store.js中的new?Vuex.Store中的state中的isShowBar對(duì)應(yīng)的值
其實(shí)在src目錄下的main.js中的new?Vue中聲明store，“store”是“store:store”的簡(jiǎn)寫（和router,路由部分在一些導(dǎo)入，聲明等部分有共同之處）
Detail.vue
<template>
??<!--?<h1>顯示電影詳情{{$route.params.n1}}</h1>?-->
??<div?v-if="filminfo"?>
??<!--?<div?id="divId1">?-->
????<img?:src="filminfo.poster"?class="poster"?/>
?<!--?</div>?-->
<!--?<div?id="divId2">?-->
????<h2>{{filminfo.name}}?{{filminfo.grade}}</h2>
????<h3>演職人員</h3>
????<swiper?class="actorsSwiper"?swipername="actorsSwiper"?pageSize="4">
??????<div?class="swiper-slide"?v-for="actor?in?filminfo.actors"
????????:key="actor.name">
????????<img?:src="actor.avatarAddress"?/>
????????<p>{{actor.name}}</p>
??????</div>
????</swiper>
????<h3>劇照</h3>
????<swiper?class="photosSwiper"?swipername="photosSwiper"?pageSize="3">
??????<div?class="swiper-slide"?v-for="(data,index)?in?filminfo.photos"
????????:key="index">
????????<img?:src="data"?/>
??????</div>
????</swiper>
??</div>
<!--?
??</div>?-->
</template>
<script>
import?axios?from?'axios'
import?swiper?from?'@/views/Detail/DetailSwiper'
// 事件總線部分?START
//?import?bus?from?'@/bus'
// 事件總線部分?END
export?default?{
??data?()?{
????return?{
??????filminfo:?null
????}
??},
??components:?{
????swiper
??},
??mounted?()?{
????//這里獲取的n1參數(shù)的內(nèi)容就是電影的id
?????const?id?=this.$route.params.n1
????//?console.log(this.$route.params.n1)
??????axios({
??????url:?`/mz/gateway?filmId=${id}&k=4359832`,
??????headers:?{
????????'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????????'X-Host':?'mall.film-ticket.film.info'
??????}
????}).then(res?=>?{
??????this.filminfo?=?res.data.data.film
??????//?console.log(JSON.stringify(this.filminfo))
????})
??
??}
??
??// 事件總線部分?START
??//???,
??//?beforeMount(){
??//??bus.$emit('performBar',?false)
???
??//?},
??//?beforeDestroy?()?{
??//?bus.$emit('performBar',?true)
????
??//?}
??
????// 事件總線部分?END
?????// vuex部分?START
????,
??beforeMount(){
??
????this.$store.commit('hideTabbar',?false)
??},
??beforeDestroy?()?{
?
????this.$store.commit('showTabbar',?true)
??}
??
????// vuex部分?END
??}
//自己加的代碼?START
//自己加的代碼?END
</script>
<style?lang="scss"?scoped>
// poster就是電影海報(bào)的圖片：
??.poster?{
//??height:400px;
????width:?100%;
//??position:absolute;
//?clip:rect(20px,550px,5200px,0px);
??overflow:?hidden;
??}
//?#divId1{
// position:?absolute;
//??clip:rect(20px,100%,100%,0px);
//??top:-50%;
//? height:?50px;
//? width:?100%;
//? border:?1px?solid?red;
// }
//?#divId2{
//? position:?absolute;
// top:50%;
//??height:?50px;
// width:?100%;
//? border:?1px?solid?red;
//??}
//?#divAll{
// position:?absolute;
// top:-50%;
// height:?50px;
//? width:?100%;
//? border:?1px?solid?red;
//??}
</style>
App.vue
<template>
??<div?id="app">
<!--?<img?src="./assets/logo.png">?-->
<!--?自己加的代碼?START?-->
<!--? <tabbar?id="id1"/>??-->
??<!--?Vuex相關(guān)?START?-->
????<tabbar?v-show="$store.state.isShowBar"/>
??????<!--?Vuex相關(guān)?END?-->
????????<!--?事件總線相關(guān)?START?-->
?<!--?<tabbar?v-show="isShowBar"/>?-->
?<!--?事件總線相關(guān)?END?-->
?<!--?<tabbar?/>??-->
<!--?使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?START?-->
<!--?<his>
??????<label>詩書畫唱</label>
????????<label?slot="header">Hit.vue這個(gè)插槽組件中slot="header"（頁眉）的內(nèi)容</label>
??????<p?slot="footer">Hit.vue這個(gè)插槽組件中slot="footer"（頁腳）的內(nèi)容</p>
</his>?-->
<!--?使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?END?-->
?<!--?<img?src="http://127.0.0.1:9001/public/a1.png"?/>?-->
<!--?<My/>?-->
<!--?自己加的代碼?END?-->
????<router-view/>
??</div>
</template>
<script>
//自己加的代碼?START
//使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?START?
//?import?his?from?'@/components/His'
//?使用Hit.vue組件這個(gè)插槽時(shí)才用的代碼?END?
//事件總線部分?START
//import?bus?from?'@/bus/index'可以略寫成import?bus?from?'@/bus'
//??import?bus?from?'@/bus'
//事件總線部分?END
//mapState簡(jiǎn)化$store.state.isShowBar部分?START
//?import?{?mapState?}?from?'vuex'
//mapState簡(jiǎn)化$store.state.isShowBar部分?END
import?tabbar?from?'@/components/Tabbar'
//?import?my?from?'@/components/My'
//自己加的代碼?END
export?default?{
??name:?'App',
??//自己加的代碼?START
??//事件總線部分?START
//????data?()?{
//?????return?{
//?isShowBar:?true
//?????}
//???},
??//事件總線部分?END
??components:?{
????//?his
???tabbar
????//?My
??},
//事件總線部分?START
??//?mounted?()?{
??//???//?當(dāng)發(fā)送給你performBar這個(gè)暗號(hào)時(shí)，
??//???//?就將isShowBar屬性的值修改為data
??//???bus.$on('performBar',?(data)?=>?{
??//?????this.isShowBar?=?data
??//???})
??//?},
??//事件總線部分?END
??//?mapState簡(jiǎn)化$store.state.isShowBar部分?START
??//?computed:?{
??//???...mapState(['isShowBar'])
??//?}
??//mapState簡(jiǎn)化$store.state.isShowBar部分?END
??//自己加的代碼?END
}
</script>
<!--源代碼?START
<style>
#app?{
??font-family:?'Avenir',?Helvetica,?Arial,?sans-serif;
??-webkit-font-smoothing:?antialiased;
??-moz-osx-font-smoothing:?grayscale;
??text-align:?center;
??color:?#2c3e50;
??margin-top:?60px;
}
</style>
源代碼?END-->
<!--自己加的SASS的代碼?START-->
<style?lang="scss">
??*?{
????margin:?0;
????padding:?0;
????//??text-align:?center;
??
??}
??html?{
????height:?100%;
??}
??li?{
????list-style:?none;
????
??}
//???#id{
//?z-index:?1;
//?position:?fixed;
//???}
</style>
<!--自己加的SASS的代碼?END-->
main.js
//?The?Vue?build?version?to?load?with?the?`import`?command
//?(runtime-only?or?standalone)?has?been?set?in?webpack.base.conf?with?an?alias.
import?Vue?from?'vue'
import?App?from?'./App'
import?router?from?'./router'
//vuex部分?START
import?store?from?'./store'
//vuex部分?END
//自己加的代碼?START
//導(dǎo)入使用小圖標(biāo)時(shí)要用的相關(guān)文件
import?'./assets/iconfont/iconfont.css'
//自己加的代碼?END
Vue.config.productionTip?=?false
/*?eslint-disable?no-new?*/
new?Vue({
??el:?'#app',
??router,
??//vuex部分?START
??store,
??//vuex部分?END
??components:?{?App?},
??template:?'<App/>'
})
store.js
//?src/store.js
import?Vue?from?'vue'
import?Vuex?from?'vuex'
??//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START
//?import?axios?from?'axios'
??//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END
//啟動(dòng)狀態(tài)管理?START
Vue.use(Vuex)
//啟動(dòng)狀態(tài)管理?END
const?store?=?new?Vuex.Store({
//下面的state，mutations，??actions，getters就是Store中的4大配置項(xiàng)
??state:?{
????isShowBar:?true,?//?是否顯示導(dǎo)航欄
????comingList:?[]//?緩存的即將上映的數(shù)據(jù)
??},
??mutations:?{
????//?s就是state對(duì)象，data是調(diào)用這個(gè)mutations時(shí)的傳遞過來的參數(shù)
????hideTabbar?(s,?data)?{
??????s.isShowBar?=?data
????},
????showTabbar?(s,?data)?{
??????s.isShowBar?=?data
????},
????comingListMt?(s,?data)?{
??????s.comingList?=?data
????}
??},
??//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START
??//?actions:?{//?專門用于做異步處理
??//???getComingListAc?(store)?{
??//?????axios({
??//???????//url路徑要對(duì):
??//???????url:?'/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=2&k=8700885',
??//???????headers:?{
??//?????????'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
??//?????????'X-Host':?'mall.film-ticket.film.list'
??//???????}
??//?????}).then(res?=>?{
??//???????store.commit('comingListMt',?res.data.data.films)
??//?????})
??//???}
??//?}
???//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END
})
export?default?store
例子3：實(shí)現(xiàn)用export導(dǎo)出變量后使用的幾種方法（export規(guī)則），用mapState簡(jiǎn)化$store.state.isShowBar為isShowBar就可以調(diào)用isShowBar的值
下面是用export導(dǎo)出變量后使用的幾種方法（export規(guī)則）和使用ma
export導(dǎo)出變量等后，在App.vue中使用import和解構(gòu)語法等等，在mounted這個(gè)鉤子函數(shù)中就可以直接用console.log的打印語句就可以打印處其變量等等。
在import中可以用i as? str類似的語法來將i重命名為str
下面就是我認(rèn)為常用的export導(dǎo)出函數(shù)并且使用函數(shù)的方法
簡(jiǎn)化獲取vuex屬性的代碼：mapState簡(jiǎn)化$store.state.isShowBar
個(gè)人對(duì)...mapState(['isShowBar'])和...擴(kuò)展運(yùn)算符的理解
你可以加多個(gè)屬性到mapState中
調(diào)用時(shí)，直接調(diào)用屬性就可以了
例子3中的代碼和例子2差不多，就是App.vue做出了些改變，下面是代碼
App.vue
????????<!--?事件總線相關(guān)或mapState簡(jiǎn)化$store.state.isShowBar，vue部分?START?-->
?<tabbar?v-show="isShowBar"/>
?<!--?事件總線相關(guān)或mapState簡(jiǎn)化$store.state.isShowBar，vue部分?END?-->
//mapState簡(jiǎn)化$store.state.isShowBar，vue部分?START
import?{?mapState?}?from?'vuex'
//mapState簡(jiǎn)化$store.state.isShowBar，vue部分?END
??//?mapState簡(jiǎn)化$store.state.isShowBar，vue部分?START
??computed:?{
????...mapState(['isShowBar'])
??}
??//mapState簡(jiǎn)化$store.state.isShowBar，vue部分?END
運(yùn)行效果和例子2一樣
例子4：用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存，實(shí)現(xiàn)第一次用后臺(tái)獲取數(shù)據(jù)后，把數(shù)據(jù)緩存，之后前臺(tái)就不用重復(fù)從后臺(tái)獲取數(shù)據(jù)，而是從緩存中獲取數(shù)據(jù)（解決如果每次都后臺(tái)獲取數(shù)據(jù)，會(huì)感覺每次請(qǐng)求數(shù)據(jù)都很慢等等的問題）
個(gè)人認(rèn)為獲取緩存的數(shù)據(jù)的話會(huì)直接請(qǐng)求數(shù)據(jù)要快，不用擔(dān)心獲取的緩存數(shù)據(jù)一直不變，因?yàn)榈诙炷愠霈F(xiàn)開啟服務(wù)器等等后重新直接請(qǐng)求數(shù)據(jù)后，每次獲取緩存的數(shù)據(jù)就發(fā)生改變了
Comingsoon.vue
<template>
??<div>
????<ul>
??????<!--?不用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START?-->
??????<!--?<li
????????v-for="data?in?dataList"
????????:key="data.filmId"
????????@click="viewDetail(data.isPresale,?data.filmId)"
??????>?-->
??????<!--?不用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END?-->
??????<!--?用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START?-->
??????<li
????????v-for="data?in?$store.state.comingList"
????????:key="data.filmId"
????????@click="viewDetail(data.isPresale,?data.filmId)"
??????>
????????<!--用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END?-->
????????<img?:src="data.poster"?/>
????????<span?class="title">{{?data.name?}}</span>
????????
????????<b?class="filmType">{{?data.filmType.name?}}</b
????????><br?/>
????????<p?v-if="data.grade">
??????????觀眾評(píng)分?<b?class="score">{{?data.grade?}}?</b>
????????</p>
????????<p?v-else>暫無評(píng)分</p>
????????<p?v-if="data.actors">
??????????主演:
??????????{{?data.actors?|?actorsfilter?}}
????????</p>
????????<p?v-else>暫無主演</p>
????????<p>{{?data.nation?}}?|?{{?data.runtime?}}分鐘</p>
??????</li>
????</ul>
??</div>
</template>
<script>
//不用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START
//?import?axios?from?"axios";
//不用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END
import?Vue?from?"vue";
//?定義一個(gè)處理data.actors數(shù)組的過濾函數(shù)actorsfilter
Vue.filter("actorsfilter",?function?(data)?{
??//?let?str?=?''
??//?for(let?actor?of?data)?{
??//???str?+=?actor.name
??//???str?+=?'?'
??//?}
??//?return?str
??return?data.map((actor)?=>?actor.name).join("?");
});
export?default?{
??data()?{
????return?{
??????dataList:?[],
????};
??},
??mounted()?{
????//?用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START
????//?如果第一次加載數(shù)據(jù)，就通過vuex的action獲取數(shù)據(jù)：
????if?(this.$store.state.comingList.length?===?0)?{
??????this.$store.dispatch("getComingListAc");
????}
????//?用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END
????//不用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START
????//?axios({
????//???//訪問即將上映電影的數(shù)據(jù)的地址1：
????//????url:?'/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=2&k=8700885',
????//???//獲取網(wǎng)頁數(shù)據(jù)的關(guān)鍵?headers（請(qǐng)求頭）部分?START
????//???headers:?{
????//???/*下面我弄的2個(gè)不同請(qǐng)求頭都是可以的（自己復(fù)制當(dāng)前自己看到的請(qǐng)求頭的內(nèi)容就可以）?*/
????//?????//復(fù)制的請(qǐng)求頭1：
????//?????//?'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????//?????//?'X-Host':?'mall.film-ticket.film.list'
????//?????//復(fù)制的請(qǐng)求頭2：
????//?????"X-Client-Info":
????//???????'{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}',
????//?????"X-Host":?"mall.film-ticket.film.list",
????//???},
????//???//獲取網(wǎng)頁數(shù)據(jù)的關(guān)鍵?headers（請(qǐng)求頭）部分?START
????//?}).then((res)?=>?{
????//?//?console.log(JSON.stringify(res.data.data.films))
????//???this.dataList?=?res.data.data.films;
????//?});
????//不用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END
??},
??methods:?{
????viewDetail(isPresale,?filmId)?{
??????//?console.log('顯示'?+?name?+?'的詳情')
??????//?配置路由動(dòng)態(tài)綁定
??????//?this.$router.push(`/detail/${name}`)
??????//?路由配置的name屬性傳參
??????//自定義n1為第1個(gè)參數(shù)，n2為第二個(gè)參數(shù)
??????if?(!isPresale)?{
????????alert("沒有排期");
????????this.$router.push(`/film/nowplaying`);
??????}?else?{
????????this.$router.push({
??????????name:?"dl",
??????????params:?{
????????????n1:?filmId,
??????????},
????????});
??????}
????},
??},
};
</script>
<style?lang="scss"?scoped>
ul?{
??li?{
????padding:?10px;
????overflow:?hidden;
????img?{
??????float:?left;
??????width:?100px;
????}
??}
}
p?{
??color:?gray;
??font-size:?12px;
??//?float:?left;
??//padding-left的數(shù)值要自己調(diào)到適應(yīng)幾乎所有型號(hào)的手機(jī)，防止浮層塌陷等等
??padding-left:?7px;
??//截取字符串并加省略號(hào)?START
??width:?233px;
??white-space:?nowrap;
??word-break:?keep-all;
??overflow:?hidden;
??text-overflow:?ellipsis;
??//截取字符串并加省略號(hào)?END
}
.title?{
??//?float:?left;
??padding-left:?7px;
}
.score?{
??color:?#ffb232;
}
.filmType?{
??//F12后鼠標(biāo)右鍵，檢查后復(fù)制的樣式?START
??font-size:?9px;
??color:?#fff;
??background-color:?#d2d6dc;
??height:?14px;
??line-height:?14px;
??padding:?0?2px;
??border-radius:?2px;
??//自己加的相對(duì)定位?START
??//?position:?relative;
??//?left:10px;
??//自己加的相對(duì)定位?END
??//F12后鼠標(biāo)右鍵，檢查后復(fù)制的樣式?END
}
</style>
store.js
//?src/store.js
import?Vue?from?'vue'
import?Vuex?from?'vuex'
??//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START
import?axios?from?'axios'
??//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END
//啟動(dòng)狀態(tài)管理?START
Vue.use(Vuex)
//啟動(dòng)狀態(tài)管理?END
const?store?=?new?Vuex.Store({
//下面的state，mutations，??actions，getters就是Store中的4大配置項(xiàng)
??state:?{
????isShowBar:?true,?//?是否顯示導(dǎo)航欄
????comingList:?[]//?緩存的即將上映的數(shù)據(jù)
??},
??mutations:?{
????//?s就是state對(duì)象，data是調(diào)用這個(gè)mutations時(shí)的傳遞過來的參數(shù)
????hideTabbar?(s,?data)?{
??????s.isShowBar?=?data
????},
????showTabbar?(s,?data)?{
??????s.isShowBar?=?data
????},
????comingListMt?(s,?data)?{
??????s.comingList?=?data
????}
??},
??//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?START
??actions:?{//?專門用于做異步處理
????getComingListAc?(store)?{
??????axios({
????????//url路徑要對(duì):
????????url:?'/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=2&k=8700885',
????????headers:?{
??????????'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
??????????'X-Host':?'mall.film-ticket.film.list'
????????}
??????}).then(res?=>?{
????????store.commit('comingListMt',?res.data.data.films)
??????})
????}
??}
???//用store.commit來實(shí)現(xiàn)加載數(shù)據(jù)的緩存?END
})
export?default?store
例子5：安裝并且使用調(diào)試工具devtools（也就是vender）的方法
自己在某個(gè)地方創(chuàng)建一個(gè)devtools的文件夾
npm?install?vue-devtools
之后打開谷歌瀏覽器
打開開發(fā)者模式
之后自動(dòng)出現(xiàn)以下效果
把擴(kuò)展程序"固定“
