記錄一下使用vue/vuex+SSR框架遇到的bug
項目框架:vue+vuex+vue-server-render
問題描述:頁面中有個區塊通過state.jkyl (JSON Object)來控制是否需要顯示,頁面未登錄前jkyl的數據是為空的,待登錄後再重新獲取就有值了,但是頁面中的區塊依然不顯示
原因分析:在未登錄時獲取數據時為空了,導致state.jkyl對象的雙向綁定關系被清掉了。後面登錄後再賦值,沒有形成雙向綁定關系導致頁面視圖未更新。
處理方法:在賦值時加默認值 {}, 見下方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; // 未登錄時這裏為undefined了,所以沒有建立綁定關系,所以即使後面有值了,也不會更新視圖,解決辦法是加個默認的空對象,用於維持雙向綁定: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() {
// 監聽登錄事件,再次發請求獲取數據,這個時候jkyl是有值的,但是界面還是不顯示
xxx.on(‘loginSuccess‘,() => { this.getData() });
},
methods: {
...mapActions([‘getData‘])
},
computed: {
...mapGetters({
jkyl: ‘getJkyl‘
})
}
}
</script>
記錄一下使用vue/vuex+SSR框架遇到的bug