token存储在vuex实现数据刷新不为空_刷新token的方法放在vuex中-CSDN博客

本文链接：https://blog.csdn.net/Annifan6666/article/details/123512118

本文介绍如何在Vue项目中结合npm的js-cookie和vuex进行token的存储和管理，确保数据在刷新后仍能保持。通过在utils创建setToken.js，vuex的store、modules/user.js及index.js的配置，实现token的有效存储和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. npm i js-cookie和npm i vuex包下载

二.在utils创建setToken.js文件,在vuex创建store创建index.js,modules文件夹中创建user.js

三.封装js-cookie

import Cookies from 'js-cookie'

const TokenKey = 'token'

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

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

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

四.vuex封装

user.js封装

// js-cookie
import { getToken} from '../../utils/setToken'
// 登录请求接口
import { sysLogin} from '../../api/login'

const state = {
  token: getToken() || '',
}
const mutations = {
  // token存
  setToken (state, value) {
    state.token = value
  }
}
const actions = {
  async toLogin (store, form) {
    const res = await sysLogin(form)
    console.log('token', res.data)
    store.commit('setToken', res.data.access_token)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

index.js

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

五.实现token存储