博客

登录页面→                 Vuex => action   **  dispatch        →                         跳转到主页面

↓                             ↑

调用登录接口Commit           ↑        resolve

↓                             ↑

修改token的状态—————↑

配置store/modules/user.js

// 状态
const state = {
  token: null//设置tokenD的共享的状态
}
// 修改状态
const mutations = {}
// 执行异步
const actions = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

token不都是通过登录才能获取的,可以将token存到本地缓存中,封装好token的转态  获取token  设置token    删除token的方法 方便调用

import Cookies from 'js-cookie'

const TokenKey = 'xxxx-xxxxtoken' // 设定一个独一无二的key

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

初始化token

import { getToken, setToken, removeToken } from '@/utils/auth'
// 状态
// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
// Vuex的持久化 如何实现 ？ Vuex和前端缓存相结合
const state = {
  token: getToken() // 设置token初始状态   token持久化 => 放到缓存中
}

探后在

mutations

中修改token

封装登录的action

登录的时候要调用登录的接口 成功设置token到vuex 失败则返回失败

注意actions的修改必须要通过mutations  调用commit属性

思路   token值其他的模块有可能也用的到,单独封装,当做公共属性以便共享