一、参考

参考大佬闲人王昱珩  白云随风飘   https://blog.csdn.net/baidu_36681154/article/details/79205173

 

二、实现功能如下：

用户进入登录页面 

选择用户登录或者游客模式登录    进入首页

首页中是否为游客，首页显示不同的信息 

 如果是游客模式      

如果是用户登录

三、实现代码

1、状态机vuex代码结构如图

1.1、下面是module.js

export const PUT_USERID = 'PUT_USERID' // 定义常量表示用户ID
export const PUT_TOKEN = 'PUT_TOKEN' // 凭证
export default {
  state: {
    // 用户相关
    user: {
      userId: '', // 用户id-int
      token: '', // 凭证-string
     },
  },
  mutations: {
    // 放入用户id
    [PUT_USERID] (state, param) {
      state.user.userId = param
    },
    // 放入用户凭证
    [PUT_TOKEN] (state, param) {
      state.user.token = param
    }
  },
  getters: {
    // 获取用户id
    getuserId: state => {
      if (localStorage.getItem('userId')) {
        state.user.userId = localStorage.getItem('userId')
      }
      return state.user.userId
    },
    // 获取token
    getToken: state => {
      if (localStorage.getItem('userToken')) {
        state.user.token = localStorage.getItem('userToken')
      }
      return state.user.token
    }
  },
actions: {
    [PUT_USER] ({
      commit
    }, userinfo) {
      commit('PUT_USERID', userinfo.userId) // ID
      commit('PUT_TOKEN', userinfo.token) // 凭证
    }
  }
}

1.2、下面是index.js

import Vue from 'vue'
import Vuex from 'vuex'
import test from './module/module'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    test
  }
})

2、下面看看使用Vuex和mapGetter（之所以使用他是因为可以简化getters写法）

2.1、首先是登录页面中

template

//输入账号密码
  <input type="text" v-model="username" placeholder="请输入用户名">
  <input type="password" v-model="password" placeholder="请输入密码">
//登录按钮
  <button @click="login">登录</button>
//游客模式
  <button  @click="tourist" >游客模式</button>

script

data() {
    return {
      username: "", //账号
      password: "" //密码
    };
  },

//用户登录
    login() {
      let param = {};
      param.username = this.username; //用户名
      param.password = this.password; //密码
      this.$axios({
        url: this.$store.state.test.ip + this.$store.state.test.loginUrl,//这个是url
        method: "post",
        data: param
      }).then(res => {
         // 0表示通信成功
        if (res.data.errCode == 0) {
          let userinfo = res.data;
          // console.log(userinfo);
          this.$store.dispatch("PUT_USER", userinfo); //保存到状态机vuex
          // 保存到本地
          localStorage.setItem("userId", userinfo.userId); //用户id
          localStorage.setItem("userToken", userinfo.token); //凭证
          this.username = "";
          this.password = "";
          // 跳转到首页
          setTimeout(() => {
            this.$router.push({
              name: "index",
            });
          }, 1000);
        } else {
          // 如果errCode不为0，提示对应错误提示文字
          console.log(res.data.errMsg);
        }
      });
    },
    //游客模式登录
    tourist() {
      // 提交到vuex状态机里
      this.$store.commit('PUT_USERID',-1);//用户id
      this.$store.commit('PUT_TOKEN','');//凭证
      // 保存到本地
      localStorage.setItem("userId", -1); //用户id
      localStorage.setItem("userToken", ''); //凭证
      this.username = "";
      this.password = "";
      // 跳转到首页
      this.$router.push({
        name: "index",
      });
    }

3、下面是首页

import { mapGetters } from "vuex"; //使用vuex中getters
 

//使用vuex中getters  保存id、token
  computed: {
    ...mapGetters(['getuserId','getToken']),
  },



created() { 
    console.log(this.getuserId,this.getToken);
    
    if (this.getuserId == "" || this.getuserId == "undefined") {
      this.showUser = false; //隐藏用户和金币信息
      this.showtourist = false; //隐藏游客模式
    } else if (this.getuserId == "-1") {
      this.showUser = false; //隐藏用户和金币信息
      this.showtourist = true; //显示游客模式
      // 如果为游客模式，则userid为-1，token为''
      this.userid='-1';
      this.userToken='';
    } else {
      this.showUser = true; //显示用户和金币信息
      this.showtourist = false; //隐藏游客模式
     }
  },