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

【问题标题】：How to get value of Vuex getter inside of Vue local data object如何在 Vue 本地数据对象中获取 Vuex getter 的值
【发布时间】：2020-08-12 15:27:44
【问题描述】：

嘿，这似乎很简单，但我就是不知道如何让我的 loggedInUser 对象在模板之外工作。我阅读了一堆其他答案，我知道我必须做一些事情来将 getter 存储在本地数据对象中。

我设置了一个临时 'id' 对象，因为这是我最终想要设置为 loggedInUser.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
    }
}

【问题讨论】：

标签： vue.js vuex vuex-modules

【解决方案1】：

mapGetters 助手只是将存储 getter 映射到本地计算属性

这个：

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 将引发错误。

【讨论】：

谢谢！这超级简单，我认为我的错误是尝试这样做，但使用了一组额外的括号。