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

<template>
   <div class="car-list-container">
        <ul>
            <li class="car-list" v-for="(v,i) in goodsList">
                <div class="car-list__img">
                    <img :src="v.url">
                </div>
                <div class="car-list__detail">
                    <p class="car-list__detail__title">{{v.title}}</p>
                    <p class="car-list__detail__number">数量：<button class="number--decrease iconfont icon-    jianhao" @click="changeNumber(v.id,-1)"></button><input type="text" readonly="" v-model="v.number">    <button class="number--increase iconfont icon-iconfont7" @click="changeNumber(v.id,1)"></button></p>
                    <p class="car-list__detail__type">规格：<span>{{v.stock}}</span></p>
                    <p class="car-list__detail__price">单价：<span>￥{{v.price}}</span></p>
                    <p class="car-list__detail__sum">小计：<span>￥{{v.price*v.number}}</span></p>
               </div>
                <div class="car-list__operate">
                    <span class="iconfont icon-shanchu delete-goods" @click="del(v.id)"></span>
                    <label >
                        <input type="checkbox" name="goods" :checked="v.select==true"     @change="toggleSelect(v.id)">
                        <span></span>
                    </label>
                </div>                  
            </li>
        </ul>
        <div class="car-foot-nav">
            <button class="sum-price">总额：￥{{sum}}</button>
            <router-link :to='{name:"index"}' class="continue-shopping" tag="button">继续购物</router-link>
            <button class="to-pay">去结算</button>
        </div>
   </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { mapGetters } from 'vuex'
export default {
    name: 'car',
    data () {
        return {      
       
        }
    },

    methods:{
        ...mapMutations(
            ["deleteGoods","updateGoods"]
        ),
        findPosition(id){
            return this.goodsList.findIndex(item=>{
                return item.id==id
             })
        },

        changeNumber(id,val){
            var i=this.findPosition(id);
            var number=this.goodsList[i].number;
            this.updateGoods({
                 index:i,
                  key:"number",
                  value:number+val<=0?1:number+val
             })
        },

        del(id){
             var i=this.findPosition(id);
            this.deleteGoods(i);
        },

        toggleSelect(id){
            var i=this.findPosition(id);
             var select=this.goodsList[i].select;
             this.updateGoods({
                  index:i,
                  key:"select",
                  value:!select
             })            
        }
    },
    computed:{
        ...mapGetters(
            [ "sum"]
        ),   
         goodsList(){
            return this.$store.state.goodsList
        }
    },
    mounted(){
      this.$ajax.get("/api/car",function(res){
        console.log(res)
      })
    }
};
</script>