vue3 vuex存取

vuex配置 

src\store\index.ts

import { createStore } from 'vuex'
import userinfo from './modules/userinfo'
import getters from './getters'
export default createStore({
  modules: {
    userinfo
  },
  getters
})

 src\store\getters.js

export default {
  token: state => state.userinfo.token,
  menuId: state => state.userinfo.menuId,
}

 store\modules\userinfo.js

import { router } from '@/router'
import { setTokenTime } from '@/utils/auth'
export default {
  state: {
    token: '',
    menuId: '',
  },
  mutations: {
    SET_TOKEN (state, value) {
      state.token= value
    },
    SET_MENU_ID (state, value) {
      state.menuId = value
    }
  },
  actions: {
    SET_MENU_ID ({ commit }, value) {
      commit('SET_MENU_ID', value)
    },
    login ({ commit }) {
      // 方法一：从浏览器地址栏中获取
      // const token = location.search.split('token')[1].split('=')[1]
      // commit('SET_TOKEN', token)
      // 方法二：从api中获取
      return new Promise((resolve, reject) => {
        loginApi(userInfo).then((res) => {
          commit('SET_TOKEN', res.token)
          setTokenTime()
          router.replace('/')
          resolve()
        }).catch((err) => {
          reject(err)
        })
      })
    },
    logout ({ commit }) {
      commit('SET_TOKEN', '')
      this.$store.dispatch('user/logout')
    }
  }
}

设置token到期时间

src\utils\auth.js 

import { TOKEN_TIME, TOKEN_TIME_VALUE } from './constant'

// 登录时设置时间
export const setTokenTime = () => {
  sessionStorage.setItem(TOKEN_TIME, Date.now())
}

// 获取
export const getTokenTime = () => {
  return sessionStorage.getItem(TOKEN_TIME)
}

// 是否已过期
export const diffTokenTime = () => {
  const currentTime = Date.now()
  const tokenTime = getTokenTime()
  return currentTime - tokenTime > TOKEN_TIME_VALUE
}

 src\utils\constant.js

// token 有效期
export const TOKEN_TIME = 'tokenTime'
export const TOKEN_TIME_VALUE = 2 * 60 * 60 * 1000

页面存储操作

import { useStore } from 'vuex'
const store = useStore()

// 存入
store.dispatch('SET_MENU_ID', menuId)

// 获取
const menuId = ref(store.state.menuId)

// 以vuex方式调取登录api
store.dispatch('userinfo/login', ruleForm)