項(xiàng)目框架：vue+vuex+vue-server-render

問(wèn)題描述：頁(yè)面中有個(gè)區(qū)塊通過(guò)state.jkyl （JSON Object）來(lái)控制是否需要顯示，頁(yè)面未登錄前jkyl的數(shù)據(jù)是為空的，待登錄后再重新獲取就有值了，但是頁(yè)面中的區(qū)塊依然不顯示

原因分析：在未登錄時(shí)獲取數(shù)據(jù)時(shí)為空了，導(dǎo)致state.jkyl對(duì)象的雙向綁定關(guān)系被清掉了。后面登錄后再賦值，沒(méi)有形成雙向綁定關(guān)系導(dǎo)致頁(yè)面視圖未更新。

處理方法：在賦值時(shí)加默認(rèn)值 {}, 見(jiàn)下方mutations.js的代碼

?

?

代碼示例如下:

store.js

const store = {

? ? jkyl = {}

}

actions.js

function getData(commit){

? ? ? ?// 這里是ajax

? ? ? ?axios.get('xxx').then((data) => {

? ? ? ? let product= data.data;

? ? ? ? ...

? ? ? ? ?commit('SET_ALL_DATA', {product});?

? ? ? })

}

mutations.js

const SET_ALL_DATA = (state, payload) => {

? let product?= payload.product;

? state.jkyl = product.jkyl; ?// 未登錄時(shí)這里為undefined了，所以沒(méi)有建立綁定關(guān)系，所以即使后面有值了，也不會(huì)更新視圖,解決辦法是加個(gè)默認(rèn)的空對(duì)象，用于維持雙向綁定：state.jkyl = product.jkyl || {}?

};

getters.js

const getJkyl = (state) => { state.jkyl }

home.vue

<templae>

<div>

...

?<dv v-if="jkyl && jkyl.list && jkyl.list.length"> ... </div>

...

</div>

</template>

<script>

export default {
? ? asyncData(){

　　return Promise.all([this.getData()])

? ?},

? ? mounted() {

? ? ? ? ? ?// 監(jiān)聽(tīng)登錄事件，再次發(fā)請(qǐng)求獲取數(shù)據(jù)，這個(gè)時(shí)候jkyl是有值的，但是界面還是不顯示

? ? ? ? ? ?xxx.on('loginSuccess',() => { this.getData() });

? ?},

? ?methods: {

? ? ? ...mapActions(['getData'])

? ?},

? ? computed: {

? ? ? ? ? ...mapGetters({

? ? ? ? ? ? ?jkyl: 'getJkyl' ? ? ??

? ? ? ? ? })

? ?}

}

</script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/mjian/p/9346773.html

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的记录一下使用vue/vuex+SSR框架遇到的bug的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。