vuex和localStorage实现购物车的长期保存@帅名

1.首先简单封装一个localStorage()方法：

const storage = {
    set(key, value){ // 调用这个方法时候传入一个 key 和 value 
            //  将传入的 value 转换成JSON 字符串
            localStorage.setItem(key,JSON.stringify(value))
        },
        get(key){  // get 方法 直接传入 key 就行
            // 反序列化，将 JSON 字符串转换成 JSON 对象
            return JSON.parse(localStorage.getItem(key)||'[]')
        },
        remove(){  //  删除
            localStorage.removeItem(key)
        }
    }
export default storage   //  将 storage 暴露出去

2.在vuex的store文件中引入，下面就能够使用了

import localStore from '../storage/index.js'

3.将组件中传给store的数据存入localStorage中

• 在加入购物车组件中传给store商品信息

this.$store.commit("add",obj)

• store接收

state: {
	//数据默认设置为localStorage中的数据
    storeLs: localStore.get('list') || ''
  },
add (state, obj) {
      //此处是为了解决重复添加问题，可无视
      let arrLs = state.storeLs.find(v => v.info.id === obj.info.id)
      if (arrLs) {
        arrLs.num += obj.num
      } else {
      	//接收到的数据添到storeLs中
        state.storeLs.push(obj)
      }
      //将数据存入本地
      localStore.set('list', state.storeLs)
    }

4.购物车页面渲染

//拿到store库中的数组，用shopList就可以直接渲染啦
computed: {
            shopList(){
                return this.$store.state.storeLs
            }
     }

5.如果想要存贮，多选框的状态，加减后的数量等，需要深度监听vuex里的数据

 watch: {
          shopList:{
            handler(){
              localStore.set("list",this.shopList)
            },
            deep:true
          }
        }

			-------------*勤学如春起之苗,不见其增,日有所长*