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

Question

嘿，这似乎很简单，但我只是想不出如何让我的 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
    }
}

Answer 1

The mapGetters helper simply maps store getters to local computed properties

这个：

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

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

How to get value of Vuex getter inside of Vue local data object

vue.js

vuex

vuex-modules