[已解决]vue项目怎么通过mapGetter中获取的token获得用户信息

pangforFC

前端使用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作为参数传入函数中，只查到页面变量的取用方法

最佳答案

月排行榜 / 总排行榜

许志兴

2023-12-26 17:20:25

话不多说上代码：
store.js

1. import {createStore} from "vuex";
   
2. 
   
3. import tokenModule from "@/store/modules/token";
   
4. 
   
5. const store = createStore({
   
6.     modules: {
   
7.         tokenModule
   
8.     }
   
9. });
   
10. 
    
11. export default store;

复制代码

token.js

1. const tokenModule = {
   
2.     namespaced: true,
   
3.     state: {
   
4.         userToken: "success"
   
5.     },
   
6.     mutations: {
   
7. 
   
8.     },
   
9.     getters: {
   
10.         getUserTokenStr(state) {
    
11.             return state.userToken;
    
12.         }
    
13.     },
    
14.     actions: {
    
15. 
    
16.     }
    
17. };
    
18. 
    
19. export default tokenModule;

复制代码

使用mapGetters方法获取

1. <script>
   
2.   import { mapGetters } from 'vuex';
   
3.   export default {
   
4.     data() {
   
5.       return {
   
6. 
   
7.       }
   
8.     },
   
9.     mounted() {
   
10.       this.getUserToken()
    
11.     },
    
12.     methods: {
    
13.       ...mapGetters('tokenModule',[
    
14.           'getUserTokenStr'
    
15.       ]),
    
16.       getUserToken() {
    
17.         let token = this.getUserTokenStr();
    
18.         console.log(token);
    
19.       }
    
20.     }
    
21.   }
    
22. </script>

复制代码

跳转到最佳答案楼层

FishC

在Vue中，可以使用`mapGetters`辅助函数将store中的`getters`映射为局部计算属性。你可以直接在组件中使用这些计算属性，而无需手动访问`store`。

首先，确保你已经在`computed`选项中使用了`mapGetters`函数，以便获取到用户的token：

1. computed: {
2.   ...mapGetters(['getToken'])
3. }

复制代码

接下来，你可以在`created`钩子函数中直接使用`this.getToken`来获取到token，并把它传递给你的`getUserinfo`函数：

1. created() {
2.   this.getUserinfo(this.getToken);
3. }

复制代码

现在，你的`getUserinfo`函数就可以接收到通过`mapGetters`获取到的token了。

完整示例代码如下：

1. import { mapGetters } from 'vuex';
3. export default {
4.   computed: {
5.     ...mapGetters(['getToken'])
6.   },
7.   methods: {
8.     getUserinfo(token) {
9.       userApi.getInfo(token).then(response => {
10.         this.userInfo = response.data;
11.         console.log(this.userInfo);
12.       });
13.     }
14.   },
15.   created() {
16.     this.getUserinfo(this.getToken);
17.   }
18. }

复制代码

希望对你有所帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

pangforFC

FishC 发表于 2023-12-25 17:10
在Vue中，可以使用`mapGetters`辅助函数将store中的`getters`映射为局部计算属性。你可以直接在组件中使用 ...

怎么查看token是否传参成功，在钩子函数中在控制台打印的语句似乎都没有执行

FishC

pangforFC 发表于 2023-12-25 17:16
怎么查看token是否传参成功，在钩子函数中在控制台打 ...

如果在钩子函数中的控制台打印语句没有执行，可能有几种原因：

1. 请确保你已经正确引入并使用了`mapGetters`函数。
2. 确认你的`this.getToken`方法返回了预期的token值。可以通过在模板中使用`{{ getToken }}`来验证。
3. 确保你的`getUserinfo`函数可以正常获取到用户信息。可以在函数内部添加`console.log`语句进行调试。

如果以上步骤都没有问题，但控制台还是没有显示任何输出，那可能是`userApi.getInfo`方法出现了问题。你可以检查接口请求是否正确，并查看网络请求的结果。

示例代码如下：

1. import { mapGetters } from 'vuex';
3. export default {
4.   computed: {
5.     ...mapGetters(['getToken']),
6.   },
7.   methods: {
8.     getUserinfo(token) {
9.       userApi.getInfo(token).then(response => {
10.         this.userInfo = response.data;
11.         console.log(this.userInfo);
12.       });
13.     },
14.   },
15.   created() {
16.     console.log(this.getToken);
17.     this.getUserinfo(this.getToken);
18.   },
19. };

复制代码

通过在`created`钩子函数中打印`this.getToken`可以验证token是否传参成功。如果能够输出token，那么可以继续调用`getUserinfo`方法来获取用户信息。

希望这次能帮助到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

pangforFC

FishC 发表于 2023-12-25 17:16
如果在钩子函数中的控制台打印语句没有执行，可能有几种原因：

1. 请确保你已经正确引入并使用了`mapGet ...

...mapGetters([
      'name',
      'token'
    ])
是这样使用mapGetters的

FishC

pangforFC 发表于 2023-12-25 17:21
...mapGetters()
是这样使用mapGetters的

抱歉，之前给出的示例代码有误。在使用`mapGetters`时，需要传入一个数组，用于指定要映射的getter函数。以下是正确的使用方式：

1. import { mapGetters } from 'vuex';
3. export default {
4.   computed: {
5.     ...mapGetters(['getToken'])
6.   },
7.   methods: {
8.     getUserinfo() {
9.       const token = this.getToken;
10.       userApi.getInfo(token).then(response => {
11.         this.userInfo = response.data;
12.         console.log(this.userInfo);
13.       });
14.     }
15.   },
16.   created() {
17.     this.getUserinfo();
18.   }
19. }

复制代码

在上面的代码中，我们将`getToken`指定为要映射的getter函数，并在`getUserinfo`方法中通过`this.getToken`获取到token值。

希望这次能够帮助到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

andbreak

直接 this.token

许志兴

话不多说上代码：
store.js

1. import {createStore} from "vuex";
   
2. 
   
3. import tokenModule from "@/store/modules/token";
   
4. 
   
5. const store = createStore({
   
6.     modules: {
   
7.         tokenModule
   
8.     }
   
9. });
   
10. 
    
11. export default store;

复制代码

token.js

1. const tokenModule = {
   
2.     namespaced: true,
   
3.     state: {
   
4.         userToken: "success"
   
5.     },
   
6.     mutations: {
   
7. 
   
8.     },
   
9.     getters: {
   
10.         getUserTokenStr(state) {
    
11.             return state.userToken;
    
12.         }
    
13.     },
    
14.     actions: {
    
15. 
    
16.     }
    
17. };
    
18. 
    
19. export default tokenModule;

复制代码

使用mapGetters方法获取

1. <script>
   
2.   import { mapGetters } from 'vuex';
   
3.   export default {
   
4.     data() {
   
5.       return {
   
6. 
   
7.       }
   
8.     },
   
9.     mounted() {
   
10.       this.getUserToken()
    
11.     },
    
12.     methods: {
    
13.       ...mapGetters('tokenModule',[
    
14.           'getUserTokenStr'
    
15.       ]),
    
16.       getUserToken() {
    
17.         let token = this.getUserTokenStr();
    
18.         console.log(token);
    
19.       }
    
20.     }
    
21.   }
    
22. </script>

复制代码