在現代Web開發中，許多Web應用程序都需要驗證/授權。因此，Web服務器上的每個安全Web端點都需要一個Token來識別用戶并授權受保護的資源。在Vue中，我們可以使用Vuex來存儲應用程序的Token。

Token是在成功的登錄后從服務器端返回的一個字符串。Token可以在客戶端本地存儲中（如LocalStorage或SessionStorage）保存，使應用程序跨頁面和刷新仍然知道身份，并且可以在每個HTTP請求的請求標頭中作為驗證令牌。

const state = {
token: localStorage.getItem('token') || '',
}
const mutations = {
saveToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
removeToken(state) {
state.token = ''
localStorage.removeItem('token')
}
}
const actions = {
saveToken({commit}, token) {
commit('saveToken', token)
},
removeToken({commit}) {
commit('removeToken')
}
}
const getters = {
token: state =>state.token,
isLoggedIn: state =>!!state.token
}

上面的代碼是Vuex的一個示例store，其中包含對Token的各種操作。store的state對象定義了一個名為token的屬性，它從LocalStorage中獲取token或一個空字符串。mutations是Vuex中的一種方法，它通過改變state來改變應用程序狀態。在此示例中，saveToken mutation用于更新store的狀態，并在LocalStorage中保存Token。removeToken mutation用于刪除store中的Token以及LocalStorage中的Token。

actions是Vuex中用于異步處理數據的方法。在此示例中，saveToken action被分派以更新store和LocalStorage中的Token。同樣，removeToken action被分派以從store和LocalStorage中刪除Token。

getters用于從store獲取計算屬性。isLoggedIn getter是一個計算屬性，它返回一個布爾值，指示用戶是否已經成功登錄。

組件可以通過Vuex store來獲取、保存或刪除Token。例如，在用戶登錄時，我們可以使用以下代碼將Token保存到store和LocalStorage中：

methods: {
login() {
api.login(this.username, this.password)
.then(response =>{
this.$store.dispatch('saveToken', response.data.token)
router.push('/')
})
}
}

在這種情況下，我們正在使用HTTP POST請求對API進行身份驗證，并獲取具有Token的響應數據。在獲取Token后，通過調用store的saveToken action，我們將Token保存到store和LocalStorage中。然后，我們使用Vue Router將用戶重定向到應用程序的主頁。

當用戶注銷時，我們可以使用類似的代碼將Token從store和LocalStorage中刪除：

methods: {
logout() {
this.$store.dispatch('removeToken')
router.push('/login')
}
}

在這種情況下，我們正在調用store的removeToken action從store和LocalStorage中刪除Token。然后，我們使用Vue Router將用戶重定向到應用程序的登錄頁面。

總之，Vuex是一個非常強大的狀態管理庫，可以幫助我們管理應用程序狀態，包括Token。使用Vuex store和相關操作，我們可以輕松地保留和刪除Token。此外，Vuex還提供了一種靈活的方式來更新應用程序的狀態，并從store中提取計算屬性。