Vuex getter始终返回null
Vuex getter始终返回null
提问于 2019-09-26 03:52:43
当我在vue.js组件中使用vuex getter时，它为我返回null。
以下是我的代码
MainLayout.vue
<script>
import NavBar from '@/components/NavBar.vue'
import ToolBar from "@/components/ToolBar"
import { mapActions, mapGetters } from 'vuex'
export default {
name: "MainLayout",
components : {
ToolBar, NavBar
},
data: () => ({
drawer: null,
}),
computed: {
...mapGetters([
'error',
]),
},
methods: {
close() {
this.$store.commit('SET_ERROR', null)
},
}
}
</script>
<template>
<div id="main">
<v-navigation-drawer clipped v-model="drawer" app>
<nav-bar></nav-bar>
</v-navigation-drawer>
<tool-bar @toggleDrawer="drawer = !drawer"/>
<v-content>
<v-container class="fill-height" fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-snackbar :timeout="0" :value="error">
{{ error }}
<v-btn color="red" text @click="close">
Close
</v-btn>
</v-snackbar>
</div>
</template>
<style scoped>
</style>这是NavBar.vue
<script>
import { mapGetters } from 'vuex'
export default {
data: () => ({
}),
computed: {
...mapGetters([
'authUser'
]),
isAdmin() {
return this.authUser.role.name == 'admin'
},
}
}
</script>Vuex模块auth.js
import api from '@/api'
import {clearAccessToken, setAccessToken} from '@/auth'
import router from '@/router'
const state = {
loading: null,
user: null
}
const mutations = {
SET_LOADING: (state, loading) => {
state.loading = loading
},
SET_USER: (state, user) => {
state.user = user
}
}
const getters = {
loading: state => {
return state.loading
},
loggedIn: (state) => {
return !!state.user
},
authUser: (state) => {
return state.user
},
}
const actions = {
async login({commit, dispatch }, user) {
commit('SET_LOADING', true)
try {
const data = await api.post('/api/auth/login', { user })
setAccessToken(data.token)
await dispatch('getUser')
commit('SET_LOADING', false)
router.push('/')
} catch (e) {
commit('SET_LOADING', false)
dispatch('handleError', e)
}
},
async getUser({commit, dispatch}) {
try {
const user = await api.get('/api/auth/user')
commit('SET_USER', user.data)
return user
} catch (e) {
clearAccessToken()
dispatch('handleError', e)
}
},
async logout({commit, dispatch}) {
try {
await api.post('/api/auth/logout')
clearAccessToken()
router.push('/login')
} catch(e) {
dispatch('handleError', e)
}
}
}
export default {
namespaced: false,
state,
getters,
actions,
mutations,
}当我运行这段代码时，我遇到了下一个错误
[Vue warn]: Error in render: "TypeError: Cannot read property 'role' of null"
但如果我添加代码
isAdmin() {
return this.authUser.role.name == 'admin'
},在ToolBaar组件中(并从NavBar中删除)
<script>
import { mapGetters } from 'vuex'
export default {
methods: {
toggleDrawer () {
this.$emit('toggleDrawer')
},
logout() {
this.$store.dispatch('logout')
}
},
computed: {
...mapGetters([
'loggedIn',
'authUser'
]),
fullName() {
return this.authUser.first_name + ' ' + this.authUser.last_name
},
isAdmin() {
return this.authUser.role.name == 'admin'
}
},
}
</script>然后它工作得很好，没有任何错误，所以我不知道这里的问题是什么，在一个组件代码中工作良好，在另一个组件代码中它不工作，而且如果我将它添加到MainLayout组件中，并将isAdmin作为道具传递，那么它也可以工作。请帮我解决这个问题。
此外，我在路由器钩子中分派用户
router.beforeEach(async(to, from, next) => {
const needAuth = to.matched.some(record => record.meta.auth)
function redirectToLogin() {
next({
path: '/login',
query: { redirect: to.fullPath },
})
}
if (!hasToken() && needAuth) {
return redirectToLogin()
}
if (hasToken() && !store.getters.loggedIn) {
try {
const user = await store.dispatch('getUser')
if (!user) {
return redirectToLogin()
}
} catch(e) {}
}
next()
})回答 1
Stack Overflow用户
发布于 2019-09-26 06:37:49
你应该用loggedIn保护你对authUser的访问。例如
isAdmin() {
return this.loggedIn && this.authUser.role.name == 'admin'
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58105680
复制相关文章
相似问题
腾讯云开发者
