vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结

  1、使用Vue完成项目，从后台获取数据绑定到页面时，无法确保页面能在组件渲染前获取到所需的数据；

    在下面两种情况中遇到过这个问题：

    1）、子组件页面需要绑定后台数据到视图层：

            解决方法：在父页面提前进行数据获取，用Vuex保存，然后子页面computed属性中返回该参数，即可保证渲染不出错；

            PS：之前尝试过在子页面mounted、created等钩子函数中在组件创建前获取数据，但始终不行，即使能正确渲染，控制台仍然会报错；改用上述方法后，不会报错，刷新页面后数据仍然在；

    2）、子组件中用Echarts画图，图表数据从后台获取：

            用上述方法，即使在父页面提前获取数据，仍然报错；仍然无法保证页面绘制图表时，数据已经获取到；

            解决措施：在mounted钩子函数中获取数据，然后将图表绘制步骤放置到$http.get()方法的回调函数中，在正确获取到数据后再进行图表绘制，在computed中返回对应参数；

     上述两种情况中，解决措施都是为了保证组件在渲染时已经获取到了后台数据，这样才不会报错

   2、页面刷新后，vuex中保存的数据将消失

         解决措施：在父页面提前获取到数据，在保存到Vuex的同时，保存到sessionStorage中，然后在子页面data中将vuex中的值赋给对应参数；

         重点是:在mounted函数中，将sessionStorage里保存的值赋给data中返回的对应参数，这样页面刷新后数据仍然存在。

        PS：在使用sessionStorage存取数据时，必须注意格式，对象与数组要做对应的处理，才能保证正确存取。

         以上就是目前为止遇到的关于数据获取后组件渲染以及页面刷新数据消失问题的解决措施小结。