使用localStorage来保持登陆状态

我们用Vue保存状态，肯定是在vuex里面实现的，我们可以通过sessionStorage来防刷新，我在这里重点介绍localStorage来保持登录状态。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // 用于定义存在vuex中的状态信息
  state: {
    isLogin: false,
    phone: localStorage.getItem("phone"), //用于表示当前手机号
    imgsrc:localStorage.getItem("imgsrc"),
  },
  getters: {
    //获取登录状态
    isLogin: (state) => state.isLogin,
  },
  // 用于修改state所需要的方法
  mutations: {
    //保存登录状态
    userStatus(state, flag) {
      state.isLogin = flag;
    },
    loginOK(state, newphone) {
      state.isLogin = true;
      state.phone = newphone;
      // 将用户信息存入localStorage持久化保存。防止刷新丢失登录状态
      localStorage.setItem("isLogin", true);
      localStorage.setItem("phone", newphone);
    },
    loginOK2(state, newimg) {
      state.imgsrc = newimg;
      // 将用户信息存入localStorage持久化保存。防止刷新丢失登录状态
      localStorage.setItem("isLogin", true);
      localStorage.setItem("imgsrc", newimg);
    },
  },
  // 用于定义异步方法，执行异步任务后，可以调用mutations修改state
  actions: {
    //获取登录状态
    userLogin({ commit }, flag) {
      commit("userStatus", flag);
    },
  },
  modules: {},
});

一定要了解vuex里面state、getters、mutations、actions的具体含义，我们在下面一个HTML代码段中体现了登陆状态是否显示次页面内容 ：v-if="$store.state.isLogin"来进行判断

 <van-tab title="我的收藏" fixed>
        <div v-if="data2">
          <div v-if="$store.state.isLogin" class="list" @click="details">
            <div v-for="v in data2.results" :key="v.nid">
              <div>
                <img :src="v.pic" alt="" />
              </div>
              <div>
                <span>{{ v.title }}</span>
                <span>{{ v.sub }}</span>
                <span>
                  <van-rate
                    :size="15"
                    color="gold"
                    void-icon="star"
                    void-color="gold"
                  />
                </span>
              </div>
            </div>
          </div>
          <div class="error2"  v-else>
            <img src="/images/404.gif" alt="">
            <div @click="goH">登录查看更多哦~</div>
          </div>
        </div>
      </van-tab>