Vue小模块之用户登录功能（三）使用Vuex管理全局数据

Vue小模块之用户登录功能（三）使用Vuex管理全局数据

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

引入Vuex

首先用npm安装Vuex

$ npm i vuex 

在目录src/vuex/下创建index.js文件

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

Vue.use(Vuex)

const store = new Vuex.Store({
    // 全局变量
    state: {
        user: undefined
    },
    // 修改全局变量必须通过mutations中的方法
    // mutations只能采用同步方法
    mutations: {
        login (state, payload) {
            state.user = payload
        },
        logout (state) {
            state.user = undefined
        }
    },
    // 异步方法用actions
    // actions不能直接修改全局变量，需要调用commit方法来触发mutation中的方法
    actions: {
        login (context, payload) {
            context.commit('login', payload)
        },
        logout (context) {
            context.commit('logout')
        }
    }
})

export default store

在main.js中引入之前的Vuex配置

import store from './vuex'
...
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

登录界面

修改Login.vue，在login方法中，通过dispatch方法来调用actions中的login方法

login () {
    this.$refs.loginForm.validate((valid) => {
        if (valid) {
            if (this.user.name === 'admin' && this.user.pass === '123') { 
                // dispatch采用Promise链式调用                         
                this.$store.dispatch('login', this.user).then(() => {
                    this.$notify({
                        type: 'success',
                        message: '欢迎你,' + this.user.name + '!',
                        duration: 3000
                    })
                    this.$router.replace('/')
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '用户名或密码错误',
                    showClose: true
                })
            }
        }
        else {
            return false
        }
    })
}

主页面

最后修改Main.vue，用户已登录的时候显示用户名和注销按钮，未登录时显示登录按钮

<template>
    <div>
        <h1>主页面h1>
        欢迎你!
        <span v-if="user"> {{user.name}}
            <el-button type="warning"  @click="login">注销el-button>
        span>
        <el-button v-else type="success" @click="login">点击登录el-button>
    div>
template>

<script>
    export default {
        methods: {
            login () {
                this.$router.replace('/login')
            },
            logout () {
                this.$store.dispatch('logout').then(() => {
                    this.$router.replace('/login')
                })
            }
        },
        computed: {
            user () {
                return this.$store.state.user
            }
        }
    }
script>

运行结果

未登录

已登录

小结

本阶段实现了页面间数据的共享，但是用户名和密码是直接写死在login方法中的，下个阶段将采用Node+Express搭建一个后台服务器，从后端进行用户名和密码的验证