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)