记录一下使用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>

 

转载于:https://www.cnblogs.com/mjian/p/9346773.html