token需要做持久化存储解决方案一：Vuex配合localStorage：重复存储token数据的原因：vuex存储是基于内存的，这速度快，但是刷新会丢失，localStorage是基于磁盘存储的，访问速度慢，但是刷新不会丢失。vuex和localStorage的结合可以实现token的持久化存储。token需要做持久化存储方案二：使用插件完成-->vuex-persistedstate在vuex中准备user和cart模块，在vuex的plugins选项中配置插件，配置user和cart模块为状态持久性。修改状态数据会触发自动同步机制。可以修改数据监控测试看是否同步成功步骤：【文档：https://developer.aliyun.com/...】安装：npmivuex-persistedstate在src/store下新建modules文件文件夹，并在modules下新建user.js和cart.js-->[src/store/modules/user.js]使用插件需要到store/index.js的plugins里面管理插件的触发机制：paths配置的模块中的数据发生变化，插件会自动帮助同步注意：数据持久化的实现默认是将数据存储在localStorage中，但是这个可以definedbypaths指定持久化数据对象，可以是整个模块，也可以是单个数据-->插件会更改user.tokenpaths中配置的模块中的数据自动帮助同步，执行过程为：每次数据变化，vuex的数据会同步到localStorage，然后数据localStorage的会在刷新的时候同步到vuex//从之前的新方法改成createStore其他不变from'js-cookie'//引入拆分模块importuserfrom'./modules/user'importcartfrom'./modules/cart'exportdefaultcreateStore({state:{},getters:{},mutations:{},actions:{},modules:{user,//cart},plugins:[//可以配置vuex的第三方插件/***这里有一个存储选项：*是一个开放给开发者自定义的插件所有存储数据方法的接口*接口中需要根据需求配置三个方法，save,retrieve,delete*getItemsetItemremoveItem*插件不关心数据最终存储到哪里，只要有这三个方法，数据的存储位置由开发者指定**/createPersistedState({key:'',//存储持久化状态的Key-->存储时的key值浏览器，可以使用这个值获取持久化存储的数据路径：['user','cart'],//部分持久化状态任意路径的数组如果没有给定路径,完整状态是持久化的-->持久化管理模块//默认存储在localStorage中，可以下载js-cookie插件，配置存储在cookies中，如下：storage:{getItem:(key)=>{//配置cookie数据存储、检索、删除方式Cookies.get(key)},setItem:(key,value)=>{console.log('storeddata',key,value);//配置cookie的存储方式，键值对。expires是设置的过期时间，这里是7天后过期Cookies.set(key,value,{expires:7})},removeItem:(key)=>Cookies.remove(key)}})]})
