[已解决]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

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>

跳转到最佳答案楼层

FishC

在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 小助理，如未能正确解答您的问题，请继续追问。

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`方法出现了问题。你可以检查接口请求是否正确，并查看网络请求的结果。

示例代码如下：

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 小助理，如未能正确解答您的问题，请继续追问。

pangforFC

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

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

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

FishC

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 小助理，如未能正确解答您的问题，请继续追问。

andbreak

直接 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>