vuex 刷新后值消失

一般我们用到vuex的典型例子在电商app购物车部分 假设我们点击一个商品 看他的详情 并加入购物车， 那么我们在这三个部分就需要用到这个商品的数据，我们给他叫goodlist,那么我们使用vuex传递数据就很方便，但是同时我们也会发现一个问题，那就是一刷新我们的数据就会消失，这是要解决这个问题除了插件以外，还有一个东西，就是存储，我们要把state里的数据给他存到存储里面这是我们就需要用到一个方法 mutations（mutations是改变state数据的唯一途径 ），我们在给state赋值的同时，把值给存到存储里面，然后给state的默认值为存储里的数据,当然我们要判断一下存储里面有没有那个值,有的话转为JSON.parse，没有的话就返回空数组【】，使用三目运算符

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

export const store= new Vuex.Store({
    state:{
        goodsList:localStorage["goodsList"]?JSON.parse(localStorage["goodsList"]): []  
    },
    getters:{
        sum:state=>{
            var total=0;
            state.goodsList.forEach((item)=>{
                if(item.select){
                    total+=item.price*item.number
                }             
            })
            return total
        },
        goddsNumber:state=>{
            return state.goodsList.length
        }
    },
    mutations:{
        addGoods:(state,data)=>{
            state.goodsList.push(data);
            localStorage.setItem("goodsList",JSON.stringify(state.goodsList));                      
        },
        deleteGoods(state,index){
           state.goodsList.splice(index,1);        
            localStorage.setItem("goodsList",JSON.stringify(state.goodsList));
        },
        updateGoods(state,data){
            const {index,key,value}=data;
            state.goodsList[index][key]=value;  
            localStorage.setItem("goodsList",JSON.stringify(state.goodsList));
        }
    }
})

car.vue