如何解决如何在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
会引发错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。