記錄一下使用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>