解决vuex在刷新后数据丢失的问题

1.为什么会丢失

store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

2.解决方案

1.将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）

//App.vue
<script>
    export default{
        created() {
            //在页面加载时读取sessionStorage里的状态信息
             if (sessionStorage.getItem("store") ) {
                this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
            }

            //在页面刷新时将vuex里的信息保存到sessionStorage里
            window.addEventListener("beforeunload",()=>{
                sessionStorage.setItem("store",JSON.stringify(this.$store.state))
            })
        }
    }
</script>

2.使用第三方插件如vuex-along（本质上还是利用session等缓存到本地）

import Vue from 'vue'
import Vuex from 'vuex'
import VueXAlong from 'vuex-along'
Vue.use(Vuex)
let productData = require('@/assets/api/list.json')

const moduleA = {
    state: {
        a1: 'a1',
        a2: 'a2',
    }
}
export default new Vuex.Store({
    state: {
        productList: [],//列表数据
        cartList: [],//购物车数据
    },
    mutations: {
        //产品列表
        setProductList(state, data){
            state.productList = data
        },
        //加入购物车
        setCartList(state, id){
            let  cartIndex = state.cartList.findIndex(item => item.id === id)
            if(cartIndex < 0){
                state.cartList.push({id, count: 1})
            }else{
                state.cartList[cartIndex].count++
            }
        },
        //删除购物车商品
        deleteCartList(state, id){
            let  cartIndex = state.cartList.findIndex(item => item.id === id)
            state.cartList.splice(cartIndex, 1)
        },
        //编辑购物车商品数量
        editCartList(state, data){
            let cartIndex = state.cartList.findIndex(item => item.id === data.id)
            state.cartList[cartIndex].count = data.count
        },
        clearCart(state){
            state.cartList = []
        },
    },
    actions: {
        getProductList(context){
            //模拟ajax请求,将返回的信息直接存储在store
            setTimeout(()=>{
                context.commit('setProductList', productData)
            }, 2000)
        },
        buy(context){
            //模拟ajax请求通过返回promise对象将结果返回给操作提交的地方
            return new Promise((resolve, reject) => {
                setTimeout(()=>{
                    context.commit('clearCart')
                    resolve({msg:'下单成功', code: 200})
                    //reject({message: '提交失败', code: 300})
                }, 1000)
            })
        }
    },
    modules: {
        ma: moduleA
    },
    //缓存state的数据到storage
    plugins: [VueXAlong()],
    //全量的参数配置(sessionStorage 数据恢复优先级高于 localStorage)
    /* plugins: [VueXAlong({
        // 设置保存的集合名字，避免同站点下的多项目数据冲突
        name: 'my-app-VueXAlong',
        //过滤ma的数据将其他的数据存入localStorage
        local: {
            list: ['ma'],//需要监听的属性名或者模块名
            isFilter: true,//是否过滤而非保存
        },
        //保存ma的a1数据到sessionStorage
        session: {
            list: ['ma.a1'],
            isFilter: false,
        },
        //仅使用sessionStorage保存
        //justSession: true,
    })] */
})