vue使用vuex存token
时间: 2023-08-14 13:05:18 浏览: 69
在 Vue 中使用 Vuex 存储 token 是非常常见的,以下是一个基本的示例:
1. 在 `store.js` 中定义 `state` 和 `mutations`:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
token: null
},
mutations: {
setToken(state, token) {
state.token = token
},
clearToken(state) {
state.token = null
}
}
})
```
2. 在组件中使用 `mapState` 和 `mapMutations` 将 `state` 和 `mutations` 映射到组件中:
```javascript
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['token'])
},
methods: {
...mapMutations(['setToken']),
login() {
// 发送登录请求,获取 token
const token = 'your_token_here'
this.setToken(token)
},
logout() {
this.clearToken()
}
}
}
```
在上面的示例中,我们定义了一个 `state` 属性 `token`,并且定义了两个 `mutations` 方法 `setToken` 和 `clearToken`,用于设置和清除 `token` 的值。
在组件中,我们使用 `mapState` 将 `token` 映射到组件的 `computed` 属性中,然后使用 `mapMutations` 将 `setToken` 映射到组件的 `methods` 属性中,以便在登录时设置 `token` 的值。同样,我们还可以将 `clearToken` 映射到组件方法中,以便在退出登录时清除 `token` 的值。
注意,上述示例中的 `your_token_here` 只是一个示例 token,实际开发中需要通过实际的登录请求获取真实的 token 值。