Vuex 구성 요소에 모듈 상태 액세스 저장

Vuex 구성 요소에 모듈 상태 액세스 저장

Vue와 Vuex는 처음이지만, 제가 알고 있는 이 문제에 대해 도움을 주실 수 있는지 알고 싶습니다만, 그 이유는 잘 모르겠습니다.주의: 라라벨에서 개발된 api를 사용하고 있습니다.

시나리오는 다음과 같습니다.

사용자 목록(데이터 테이블)을 표시하는 공통 구성 요소를 만들었습니다.

사용자/컴포넌트/Users.vue

<template>
            ....
</template>

<script>
import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'

export default {
data () {
    return {
        items: [],
        user: {}
    }
},
methods: {
    ...mapActions({
        getUsers: 'users/getUsers'
    })
},
mounted () {

    ***this.user = {
        ...mapGetters({
            user: 'auth/user'
        })
    }

     this.user = {
         ...mapGetters({
             user: 'auth/user'
         })
     }
    var routeName = this.$route.name // users or admins
    this.getUsers(route, user)

    this.items = this.$store.state.users
 }
}
</script>

현재 어플리케이션에는 일반 사용자, 관리자 및 슈퍼 관리자의 3가지 역할이 있습니다.

슈퍼 관리자는 디스플레이 사용자를 위해 다음 2개의 모듈을 갖습니다.

1. 모든 일반 사용자 목록입니다.
2. 모든 관리자 목록입니다.

이 2개의 모듈은 다른 루트에 있기 때문에 사용자 목록을 표시하는 공통 컴포넌트를 재사용했습니다.

현재 Vuex에는 두 개의 모듈이 있습니다.첫 번째 모듈은 상태 파일에 로그인한 사용자의 정보(이름, 이메일, 역할)가 포함된 인증 모듈입니다.두 번째 모듈은 사용자 모듈입니다.이 모듈에는 입력하는 경로와 사용자의 역할에 따라 API를 통해 전달된 사용자 목록이 포함됩니다.

사용자 모듈에는 getRegularUsers(), getAdmins() 및 getUsers(routeName, role)의 3가지 액션이 있습니다.마지막 액션은 루트(사용자가 현재 속해 있는 URL)와 사용자 역할을 수신한 사용자 컴포넌트에서 호출됩니다.

getUsers()의 정의는 다음과 같습니다.

사용자/스토어/액션.개요

...
export const getUsers = (routeName, role) => {

if (routeName == 'admins') {
    if (role === 'SuperAdmin')
        this.getAdmins()
}
else
    this.getRegularUsers();

}
....  

보시는 바와 같이 이 액션에서는 로그인하고 있는 현재 사용자의 역할과 루트를 고려합니다.루트 또는 역할에 따라 이 액션에서는 작성한 다른 액션이 호출됩니다.다음 두 가지 다른 액션은 사용자가 커밋(변환)을 통해 가져옵니다.이것은 사용자 객체의 배열입니다.

사용자/스토어/상태js

export default {
  users = []
}

문제:

크롬 콘솔을 보면 다음과 같은 오류가 나타납니다.정의되지 않은 오류 또는 null 오류는 this.user.role이 정의되지 않았음을 의미합니다.

vuex-devtools를 보면 getters 및 state에서도 사용자에게 역할이 할당되어 있음을 알 수 있습니다.사용자 역할 - getter 및 상태

질문:

나는 이런 행동을 한 적이 있다.$store.getters.user.role을 지정해도 아무 일도 일어나지 않습니다.

그러니, 네가 날 도와줄 수 있길 바라.제가 처한 상황을 잘 설명한 것 같아요.

당신의 후원에 대해 감사해요.

역할 사용자를 가져옵니다.

var routeName = this.$route.name // users or admins
this.getUsers(route, this.user.role)

설정하다mapGetters산산: :

computed: {
    ...mapGetters({
        user: 'auth/user'
    })
}

이 회선에는 vuex getters를 사용합니다.

this.items = this.$store.state.users

언급URL : https://stackoverflow.com/questions/44857567/vuex-store-module-state-access-in-component