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