vue项目持久化存储数据的实现代码

<强>方式一,使用localStorage在数据存储

1,要在浏览器刷新的时候重新存储起来

 if  (window.localStorage.getItem (authToken)), {
　　store.commit (types.SETLOANNUMBER, window.localStorage.getItem(& # 39;了# 39;));
　　}

<>强方式二,使用vue-cookie插件来做存储

1,参考地址传送门

2,安装包

 npm  install  vue-cookie ——保存

3,在商店中存储起来

 import  Vue 得到& # 39;vue # 39;;
　　import  Vuex 得到& # 39;vuex& # 39;;
　　
　　Vue.use (Vuex)
　　var  VueCookie =,要求(& # 39;vue-cookie& # 39;);
　　
　　export  default  new  Vuex.Store ({
　　状态:{
　　令牌:VueCookie.get(& # 39;标记# 39;)
　　}，
　　突变:{
　　saveToken(状态,令牌),{
　　state.token =,令牌;//,设置存储
　　VueCookie.set(& # 39;令牌,,,,,{,到期:& # 39;30 & # 39;,});
　　}
　　}，
　　行动:{
　　
　　}
　　})

4,在登录页面中设置到存储中

 import  {, mapMutations },得到& # 39;vuex& # 39;;
　　export  default  {
　　方法:,{
　　登录(),{
　　this.saveToken (& # 39; 123 & # 39;)
　　}，
　　…mapMutations ([& # 39; saveToken& # 39;])
　　}
　　};

<>强方式三,使用vuex-persistedstate插件参考文件

在做大型项目,很多数据需要存储的建议使用这种方式

您可能感兴趣的文章: