[JavaScript知识库]基于Vue的会员管理系统（六）

很久没更新这个坑了，今天复习了一下Vuex，打算把Vuex在这个项目里面的使用写一下。

根据官方文档

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

项目中，每次跳转路由前都会被导航守卫拦截一次，从localstorage中获取token和user信息，验证token以及user信息是否有效。为了方便获取和管理登录信息，使用Vuex进行状态管理。

具体实现

1. 根目录下创建一个store文件夹，文件夹下创建一个index.js文件，在当前文件import vuex并注册

import Vue from "vue"
import Vuex from "vuex"
import user from "./modules/user"

Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
        user
    }
})

export default store

2. 在utils文件夹下创建一个auth.js文件，存放获取、设置登录信息的一些方法

// 获取 token
export function getToken() {
    return localStorage.getItem(TOKEN_KEY)
}
// 保存 token
export function setToken(token) {
    return localStorage.setItem(TOKEN_KEY, token)
}
// 获取用户信息
export function getUser() {
    return JSON.parse(localStorage.getItem(USER_KEY))
}
//保存用户信息
export function setUser(user) {
    localStorage.setItem(USER_KEY, JSON.stringify(user))
}
//移除用户信息
export function removeToken() {
    localStorage.removeItem(TOKEN_KEY)
    localStorage.removeItem(USER_KEY)
}

3. 在store文件夹下创建modules文件夹，模块化状态管理。当前项目只有一个user模块，管理系统的token和user信息。

const user = {
    state: {
        token: getToken(),
        user: getUser()
        // token: null,
        // user: null
    },

    mutations: {
        SET_TOKEN(state, token) {
            state.token = token
            //将token保存到localstorage里面，因为路由跳转前（参考permission.js）需要从localstorage里面获取token
            setToken(token)
            //解决问题：跳转路由不需要获取token
            // 但刷新后localstorage里没有信息，需保存
        },
        SET_USER(state, user) {
            state.user = user
            //将用户信息保存到localstorage里面
            setUser(user)
        }
    },

    actions: {
        // 登录获取token
        Login({ commit }, form) {
            return new Promise((resolve, reject) => {
                login(form.username.trim(), form.password).then(response => {
                    const resp = response.data
                    commit("SET_TOKEN", resp.data.token)
                    resolve(resp)
                })
            }).catch(error => {
                reject(error)
            })
        },

        //通过token获取用户信息
        GetUserInfo({ commit, state }) {
            return new Promise((resolve, reject) => {
                getUserInfo(state.token).then(response => {
                    const respUser = response.data
                    // console.log("response.data", respUser)
                    commit("SET_USER", respUser.data)
                    resolve(respUser)
                }).catch(error => {
                    reject(error)
                })
            })
        },

        //退出系统
        Logout({ commit, state }) {
            return new Promise((resolve, reject) => {
                logout(state.token).then(response => {
                    const resp = response.data
                    commit("SET_TOKEN", '')
                    commit("SET_USER", null)
                    removeToken()
                    resolve(resp)
                }).catch(error => {
                    reject(error)
                })
            })
        }
    }
}

4. 使用Vuex
   在login.vue文件中，提交登录表单时调用方法
   this.$store.dispatch([action方法名],[入参])
   调用action方法，通过更改mutation来更改state，达到状态管理

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //信息有效，导入信息
          this.$store.dispatch("Login", this.form).then(response => {
            console.log(response);
            if (response.flag) {
              //前往首页
              this.$router.push("/");
            } else {
              this.$message({
                message: response.message,
                type: "warning"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }