Vuex持久化 &vue组件设置背景色

一、Vuex持久化插件

      在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。为了克服这个问题， vuex-persistedstate出现了~~

1、原理

      将vuex的state存在localStorage或sessionStorage或cookie中一份，刷新页面的一瞬间，vuex数据消失，vuex会去sessionStorage中得到数据，变相的实现了数据刷新不丢失~

2、安装

      npm install vuex-persistedstate  --save

3、配置

        import Vue from 'vue';
        import Vuex from 'vuex';
        //vuex持久化插件
        import createPersistedState from "vuex-persistedstate";
        Vue.use(Vuex);

        //创建Vuex实例并导出
        export default new Vuex.Store({
            省略号。。。
            plugins: [createPersistedState()]
        })

4、配置完成后重启项目进行页面刷新，查看是否成功

二、Vue组件设置背景色

• vh：浏览器视区高度百分值

• wh：浏览器视区宽度百分值

• min-height：最小高度，其他时候自适应

给组件根标签设置：min-height：100vh，就可以正常添加背景色

    <style scoped>
    .grayly {
      background: #f4f4f4;
      min-height: 100vh;
    }
    </style>

每日额外（订单详情页面）

Vue组件页面渲染正常，仍然报错address is not defined

控制台

        order.cinemaInfo.address

（1）解决前奏：order一个对象，当访问它没有的属性时会返回undefined，再访问undefined的address时就会直接报错

（2）找到原因：
       数据请求是异步的，在页面进行挂载的时候，数据还没传过来，但是我们已经开始访问data中order这个对象了，页面挂载完成（vue生命周期mounted），页面会因为order暂时没有数据而显示undefined。
      当数据传过来后，data中的数据发生改变，触发更新的钩子（生命周期updated），然后就会渲染到页面上，所页面正常显示

（3）解决：使用逻辑运算（逻辑与&&）

     {{order.cinemaInfo && order.cinemaInfo.address}}

• 当数据还没传过来时，返回第一个undefined，不再往下执行，就不会发生不报错
• 当数据传过来后，第一个为true，第二个为true，返回第二个得到数据正常渲染页面