如何保存checkbox的选中状态？

Question

跳转订单页后，点击返回当前页，却不能保持商品的选中，怎么解决？

 <template>
      <div>
        <ul>
            <li class="bookItem" v-for="item in bookList" :key="item.id" style="text-align: left;">
                <el-checkbox-group v-model="checkList" @change="handleCheckedBooks">
                    <el-checkbox :label="item.id">
                        <img class="bookImg" :src='item.book_url' style="width: 100px; height: 100px;">
                        <h3>{{item.book_title}}</h3>
                        <span class="price">￥{{item.book_price}}</span>
                        <div>
                            <el-input-number v-model="item.num" size="small" @change="handleChange" :min="1"></el-input-number> 
                        </div>
                    </el-checkbox>
                </el-checkbox-group>
            </li>
        </ul>
        <div class="cart">
            <span>共</span>
            <span class="highLight">{{mount}}</span>
            <span>本</span>
            <el-button type="primary" @click.stop="onOrder" :disabled="this.checkList.length===0"><router-link :to="{name:'Money',params:{data:this.sel}}">提交订单</router-link></el-button>
            <!-- <el-button type="primary" @click.stop="onOrder"><router-link to="/book/bookMoney">提交订单</router-link></el-button> -->
        </div>
      </div>
     </template>
    <script> 
    import bookMoney from '@/book/bookMoney'
    export default {
      components: {
        BreadCrumb,
        bookMoney
      },
      data () {
        return {
        checkAll: false,
        isIndeterminate: true,
        breadCrumbList: [],
        bookList: [],
        radio: '0',
        checkList: [],
        num: 1,
        mount: 0,
        total: 0,
        sel: []
        }
      },
      mounted () {
        this.bookList = [{
        id: '0',
        book_url: require('../assets/images/book1.jpg'),
        book_title: '古埃及死者之书',
        book_price: '39',
        num: 0
        },{
        id: '1',
        book_url: require('../assets/images/book2.jpg'),
        book_title: '当你开始爱自己',
        book_price: '45',
        num: 0
        },{
        id: '2',
        book_url: require('../assets/images/book3.jpg'),
        book_title: '格雷巴旅馆',
        book_price: '59',
        num: 0
        },{
        id: '3',
        book_url: require('../assets/images/book4.jpg'),
        book_title: '亲密关系',
        book_price: '30',
        num: 0
        },{
        id: '4',
        book_url: require('../assets/images/book5.jpg'),
        book_title: '治愈的力量',
        book_price: '25',
        num: '0'
        },{
        id: '5',
        book_url: require('../assets/images/book6.jpg'),
        book_title: '公主走进黑森林',
        book_price: '69',
        num: 0
        }
        ]
      },
      watch: {
        'checkList': function (val, oldVal) {
           
        },
        deep: true
      },
      methods: {
        onOrder () {
        },
        handleCheckedBooks () {
            this.sel = []
            this.checkList.forEach((item) => {
              this.bookList.forEach((val) => {
              if (val.id == item) {
                let tmp = {}
                tmp.id = this.bookList[Number(item)].id
                tmp.product_inf = this.bookList[Number(item)].book_title
                tmp.product_price = this.bookList[Number(item)].book_price
                tmp.product_quantity = this.bookList[Number(item)].num
                tmp.total_amount = this.bookList[Number(item)].book_price * this.bookList[Number(item)].num
                this.sel.push(tmp)
              }
            })
            // console.log(this.sel)
        })
        },
        handleChange (val) {
            this.mount++
            this.$nextTick(function () {
            this.checkList.forEach((item) => {
            this.bookList.forEach((obj) => {
            if (obj.id === item) {
            this.total = val * obj.book_price
            }
            })
          })
        })
        },
      }
    }
    </script>

Answer 1

因为你跳转页面你时候路由发生了变化，再返回页面的时候,vue组件重新渲染导致的啊，
解决办法可以这样：
可以弄个缓存 localstorage 或者vuex去存一下 this.checkList 的值，
然后watch监听一下路由变化,

watch:{

$route(to,from){
    if(to=='xx路由'){
        this.checkList = xxx;  重新赋值.
    }
}

}

Answer 2

我记得router好像有个叫keep-alive的属性是保存当前路由状态的，你查查呢，不然就把数据往vux里面存

Answer 3

keep-alive可缓存组件的状态