vue项目怎么通过mapGetter中获取的token获得用户信息
前端使用vue开发，通过computed: {
...mapGetters([
'name',
'token'
])
},
获取到了当前用户的信息和token
想要通过函数
getUserinfo(token) {
userApi.getInfo(token).then(response => {
this.userInfo = response.data;
console.log(this.userInfo);
})
},
和钩子函数
created() {
this.getUserinfo(token);
}
实现用户一进入页面就显示自己的用户信息
目前不知道怎么把通过mapGetters获得的token作为参数传入函数中，只查到页面变量的取用方法 在Vue中，可以使用`mapGetters`辅助函数将store中的`getters`映射为局部计算属性。你可以直接在组件中使用这些计算属性，而无需手动访问`store`。
首先，确保你已经在`computed`选项中使用了`mapGetters`函数，以便获取到用户的token：
computed: {
...mapGetters(['getToken'])
}
接下来，你可以在`created`钩子函数中直接使用`this.getToken`来获取到token，并把它传递给你的`getUserinfo`函数：
created() {
this.getUserinfo(this.getToken);
}
现在，你的`getUserinfo`函数就可以接收到通过`mapGetters`获取到的token了。
完整示例代码如下：
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['getToken'])
},
methods: {
getUserinfo(token) {
userApi.getInfo(token).then(response => {
this.userInfo = response.data;
console.log(this.userInfo);
});
}
},
created() {
this.getUserinfo(this.getToken);
}
}
希望对你有所帮助！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2023-12-25 17:10
在Vue中，可以使用`mapGetters`辅助函数将store中的`getters`映射为局部计算属性。你可以直接在组件中使用 ...
怎么查看token是否传参成功，在钩子函数中在控制台打印的语句似乎都没有执行 pangforFC 发表于 2023-12-25 17:16
怎么查看token是否传参成功，在钩子函数中在控制台打 ...
如果在钩子函数中的控制台打印语句没有执行，可能有几种原因：
1. 请确保你已经正确引入并使用了`mapGetters`函数。
2. 确认你的`this.getToken`方法返回了预期的token值。可以通过在模板中使用`{{ getToken }}`来验证。
3. 确保你的`getUserinfo`函数可以正常获取到用户信息。可以在函数内部添加`console.log`语句进行调试。
如果以上步骤都没有问题，但控制台还是没有显示任何输出，那可能是`userApi.getInfo`方法出现了问题。你可以检查接口请求是否正确，并查看网络请求的结果。
示例代码如下：
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['getToken']),
},
methods: {
getUserinfo(token) {
userApi.getInfo(token).then(response => {
this.userInfo = response.data;
console.log(this.userInfo);
});
},
},
created() {
console.log(this.getToken);
this.getUserinfo(this.getToken);
},
};
通过在`created`钩子函数中打印`this.getToken`可以验证token是否传参成功。如果能够输出token，那么可以继续调用`getUserinfo`方法来获取用户信息。
希望这次能帮助到你！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2023-12-25 17:16
如果在钩子函数中的控制台打印语句没有执行，可能有几种原因：
1. 请确保你已经正确引入并使用了`mapGet ...
...mapGetters([
'name',
'token'
])
是这样使用mapGetters的 pangforFC 发表于 2023-12-25 17:21
...mapGetters()
是这样使用mapGetters的
抱歉，之前给出的示例代码有误。在使用`mapGetters`时，需要传入一个数组，用于指定要映射的getter函数。以下是正确的使用方式：
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['getToken'])
},
methods: {
getUserinfo() {
const token = this.getToken;
userApi.getInfo(token).then(response => {
this.userInfo = response.data;
console.log(this.userInfo);
});
}
},
created() {
this.getUserinfo();
}
}
在上面的代码中，我们将`getToken`指定为要映射的getter函数，并在`getUserinfo`方法中通过`this.getToken`获取到token值。
希望这次能够帮助到你！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 直接 this.token 话不多说上代码：
store.js
import {createStore} from "vuex";
import tokenModule from "@/store/modules/token";
const store = createStore({
modules: {
tokenModule
}
});
export default store;
token.js
const tokenModule = {
namespaced: true,
state: {
userToken: "success"
},
mutations: {
},
getters: {
getUserTokenStr(state) {
return state.userToken;
}
},
actions: {
}
};
export default tokenModule;
使用mapGetters方法获取
<script>
import { mapGetters } from 'vuex';
export default {
data() {
return {
}
},
mounted() {
this.getUserToken()
},
methods: {
...mapGetters('tokenModule',[
'getUserTokenStr'
]),
getUserToken() {
let token = this.getUserTokenStr();
console.log(token);
}
}
}
</script>
页:
[1]