最新做项目遇到的这个需求，我使用的localStorage本地存储，页面刷新了也会一直存在,不会出现丢失情况，在登录的时候勾选记录登录状态，在重新打开页面的时候用户的手机号密码信息一直在

1.先下载安装vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {}
const state = {
  user_name: localStorage.getItem('user_name'),
  isLogin : localStorage.getItem('isLogin')
}
// getters 只会依赖 state 中的成员去更新
const getters = {
  userName: (state) => state.user_name,
  isLogin :(state) => state.isLogin
}
const mutations = {
  handleUserName: (state, user_name) => {
      state.user_name = user_name
      localStorage.setItem('user_name', user_name)  
  },
  isLogin(state,status){
    state.isLogin = status;
    localStorage.setItem('isLogin', status)
  },
  LoginOut (state){
    localStorage.clear();
    state.user_name = '';
    state.isLogin = false;
  },

}

const store = new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})
export default store;

2.在入口文件main.js中引用

import store from '@/store/store';

3.请求登录接口，成功的时候获的用户信息，登录状态为true

 this.$store.commit("handleUserName", res.data.username);
 this.$store.commit("isLogin", true);

4.在页面中引用

 <a href target="_self" v-show="!$store.getters.isLogin">新之助</a>
 <a @click="ClickLocation"  v-show="$store.getters.isLogin">{{$store.getters.userName}}</a>

效果图如下

可以在控制台进行查看本地存储信息

5.勾选记住登录状态

这部分是用的使用cookie来存储，设置的记住登录信息时间为7天

设置cookie

 setCookie(c_phone, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "tel" + "=" + c_phone + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "pwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },

获取cookie

 //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "tel") {
            this.tel = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "pwd") {
            this.pwd = arr2[1];
          }
        }
      }
    },

在页面初始化的时候调用

 created() {
    //初始化的时候获取cookie
    this.getCookie();
  },
methods:{
  login(event) {
      event.preventDefault();
      //判断复选框是否被勾选 勾选则调用配置cookie方法
      if (this.checked == true) {
        //传入账号名，密码，和保存天数3个参数
        this.setCookie(this.telName, this.pwd, 7);
      }
   }
}