js中 使用vuex getToken方法
时间: 2023-12-10 11:39:21 浏览: 119
首先,在 Vuex 的 store 中定义一个名为 `state` 的对象,用于存储应用中的共享状态。其中,我们需要定义一个名为 `token` 的属性来存储用户的身份令牌(token):
```javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: null, // 用户身份令牌
},
mutations: {
setToken(state, token) {
state.token = token;
},
},
actions: {
// 异步获取 token
async getToken({ commit }) {
const token = await fetch('/api/token').then(res => res.json());
commit('setToken', token);
},
},
});
export default store;
```
在上面的代码中,我们定义了一个名为 `setToken` 的 mutation,用于更新 `state` 中的 `token` 属性。同时,我们还定义了一个名为 `getToken` 的 action,用于异步获取用户的身份令牌,并通过 `commit` 方法调用 `setToken` mutation 来更新 `state` 中的 `token` 属性。
接下来,在组件中使用 `mapActions` 辅助函数来将 `getToken` action 映射到组件中的 `methods` 中:
```javascript
// MyComponent.vue
<template>
<div>
<p>Token: {{ token }}</p>
<button @click="getToken">获取 Token</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['token']),
},
methods: {
...mapActions(['getToken']),
},
};
</script>
```
在上面的代码中,我们使用 `mapState` 辅助函数将 `state` 中的 `token` 属性映射到组件的 `computed` 计算属性中,以便在模板中使用。同时,我们还使用 `mapActions` 辅助函数将 `getToken` action 映射到组件的 `methods` 方法中,以便在模板中触发异步获取用户身份令牌的操作。
阅读全文
相关推荐

















