如何在Vue本地数据对象中获取Vuex getter的值

问题描述

嘿，这似乎很简单，但我只是不知道如何让我的loggingInUser对象在模板之外工作。我通读了许多其他答案，我知道我必须做一些事情才能将吸气剂存储在本地数据对象中。

我设置了一个临时的“ id”对象，因为这是我最终想要设置为loggingInUser.id以便附加到我的Axios请求的原因。

这是我要在其上进行更改的页面：

<script>

import { mapGetters } from 'vuex'
// import vuex from 'vuex'


export default {
   data: () => ({
      results: "",id: "15",}),computed: {
    ...mapGetters(['loggedInUser'])
  },// var id = {{loggedInUser}};
  methods: {

      getData() {
          this.$axios.get('http://127.0.0.1:8000/api/v1/actors/',{params: {user: this.id} }
            )
            .then(response => {this.results = response.data});
           

      }
  }
}
</script>

这是我要存储的index.js：

export const getters = {
    isAuthenticated(state) {
        return state.auth.loggedIn
    },loggedInUser(state) {
        return state.auth.user
    }
}

解决方法

mapGetters助手只是将商店的获取方法映射到本地计算的 属性

此：

computed: {
  ...mapGetters(['loggedInUser'])
},

等效于此：

computed: {
  loggedInUser() {
    return this.$store.getters.loggedInUser
  },},

---

在您的axios请求中将this.id替换为this.loggedInUser.id，并摆脱临时的id数据属性。

 getData() {
   this.$axios.get('http://127.0.0.1:8000/api/v1/actors/',{
       params: {
         user: this.loggedInUser.id
       }
     })
     .then(response => {
       this.results = response.data
     });
 }

我们假设getData仅在用户通过身份验证时才被调用。如果不是这种情况，请记住this.loggedInUser可能是null或undefined，访问this.loggedInUser.id会引发错误。