遨翔在知识的海洋里----（vuex之登录退出）

vuex/user.js

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

Vue.use(Vuex)

const userStore = new Vuex.Store({
    //初始数据状态
    state: {
        userInfo: {}
    },
    同步改变数据状态值,唯一改变数据状态值的方法
    mutations: {
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo
        }
    },
    异步改变数据状态值
    actions: {
        setUserInfo({ commit }, user) {
            commit('setUserInfo', user)
        }
    }
})
export default userStore

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/user' //引用

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,   //注册
    components: { App },
    template: '<App/>'
})

登录

                axios
                    .post("http://localhost:3000/login", {
                        username: this.username,
                        password: this.password
                    })
                    .then(Response => {
                        if (Response.data.code == 2) {
                            alert("账号密码错误");
                            return;
                        } else if (Response.data.code == 1) {
                            console.log(Response)
                            let user = {
                                username: Response.data.data[0].username,
                                id: Response.data.data[0].id,
                            };
                            //登录成功，根据返回来的id,username，组成对象，存储到vuex中
                            //this.$store.dispatch("setUserInfo", user); //异步
                            this.$store.commit("setUserInfo", user);  //同步
                            this.$router.push({ path: "/admin/user" });
                        }
                    })
                    .catch(Error => {
                        console.log(Error);
                    });

根据是否有vuex的值显示div

                <div v-if="this.$store.state.userInfo.username">
                    <span>你好,</span>
                    <span>{{this.$store.state.userInfo.username}}</span>
                    <span @click="logout">登出</span>
                </div>
                <div v-else>
                    <router-link to="/admin/user/login">请登录</router-link>
                </div>

清空vuex数据

        logout() {
            this.$store.commit("setUserInfo", "");
            window.location.reload();
        }

图解

vuex为空

登陆

vuex有数据