Vue.js: 사용자가 로그인하거나 로그인하지 않을 때 Vuex Store 상태를 기준으로 탐색 모음의 버튼 표시/숨기기

Vue.js: 사용자가 로그인하거나 로그인하지 않을 때 Vuex Store 상태를 기준으로 탐색 모음의 버튼 표시/숨기기

사용자가 로그인했는지 여부에 따라 단추를 표시하거나 숨기는 네비바를 만들고 있다.이를 위해 Vuex와 localStorage에 상태를 저장한다.

객체 목록(즉, 객체 목록)을 사용하여 동적 메뉴를 구축하려고 한다.rightMenu버튼의 정보(즉, 사용자가 로그인한 경우 버튼의 표시 여부를 나타내는 경로, 제목 및 플래그)가 포함되어 있다.

사용자가 시스템에 항상 로그인하는 경우this.$store.state.auth.isUserLoggedIn로 바뀌다.true그러나 템플릿은 변경되지 않고 사용자가 로그인하지 않았을 때 버튼은 동일한 초기 상태로 유지된다.예:sign out버튼이 표시되지 않음this.$store.state.auth.isUserLoggedIn업데이트.그런데 'ctrl+F5'를 클릭해 페이지를 다시 로드하면 버튼이 제대로 나타난다.이 경우 예를 들어, 다음과 같다.sign out수동으로 페이지를 다시 로드하면 버튼이 올바르게 나타난다.

나는 사용자가 로그인하거나 로그아웃할 때 페이지를 다시 로드하도록 강제하려고 생각하지만, 나는 그것이 좋은 옵션이 아니라고 믿는다.

누가 나를 도와줄 수 있니?

나는 내가 사용하고 있는 코드를 아래와 같이 주고 있다.

미리 고맙다.

메뉴.vue > 템플릿

<div>
    <v-toolbar color='grey darken-3' dark>
        <v-toolbar-title>Site</v-toolbar-title>

        ...

        <v-toolbar-items class='hidden-sm-and-down'>
            <v-btn v-for='item in rightMenu' :key='item.title'
                   :to='item.to' v-if='item.showButton' flat>
                   {{ item.title }}
            </v-btn>
        </v-toolbar-items>

    </v-toolbar>

    <router-view/>
</div>

메뉴.vue > 스크립트

export default {
  data () {
    return {
      rightMenu: [
        { to: '/sign_in', title: 'sign in'
          showButton: !this.$store.state.auth.isUserLoggedIn },
        { to: '/sign_up', title: 'sign up'
          showButton: !this.$store.state.auth.isUserLoggedIn },
        { to: '/sign_out', title: 'sign out'
          showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  },
  ...
}

store.js.

const store = new Vuex.Store({
  state: {
    auth: {
      token: '',
      isUserLoggedIn: false
    }
  },
  mutations: {
    setAuthToken (state, token) {  // I use it on the Login
      state.auth.token = token
      state.auth.isUserLoggedIn = !!token
      localStorage.setItem('store', JSON.stringify(state))
    },
    cleanAuth (state) {  // I use it on the Logout
      state.auth = {
        token: '',
        isUserLoggedIn: false
      }
      localStorage.setItem('store', JSON.stringify(state))
    }
  }
  ...
})

편집 1:

사용할 때this.$store.state.auth.isUserLoggedIn분명히 내 코드에 따르면, 그것은 잘 작동한다.그래서 버튼이 나타났다가 정확하게 사라진다.아래에 예를 하나 들겠다.

메뉴.vue > 템플릿

<v-toolbar-items class='hidden-sm-and-down'>
    <v-btn v-if='this.$store.state.auth.isUserLoggedIn' flat> 
      Test {{ this.$store.state.auth.isUserLoggedIn }}
    </v-btn>
</v-toolbar-items>

따라서, 나는 그 문제는 구속력에 있다고 믿는다.showButton와 함께this.$store.state.auth.isUserLoggedIn.

사용하다computed그것을 만드는 재산.reactive:

<template>
...
<v-btn v-for='item in rightMenu' :key='item.title'
  :to='item.to' v-if='isUserLoggedIn(item.title)' flat>
  {{ item.title }}
</v-btn>
...
</template>

<script>
...
computed: {
  isUserLoggedIn() {
    return (title) => {  // you'll not have any caching benefits
      if (title === 'sign out') {
        return this.$store.state.auth.isUserLoggedIn;
      }
      return !this.$store.state.auth.isUserLoggedIn;
    }
  }
}
...
</script>

크리스 리, 안드레이 게오르기우, 사지브 칸의 대답을 통해 나는 나의 문제를 해결할 수 있었다.

Andrei Gheorghiu는 다음에서 계산된 속성에 액세스할 수 없다고 설명했다.data()크리스 리는 대신 계산 변수를 사용하자고 제안했다.이러한 대답들과 사지브 칸의 예를 더한 나는 아래 나와 공유한 해결책에서 생각할 수 있었다.앞으로 다른 사람에게 도움이 되었으면 좋겠다.

간단히 말해, 어레이를 반환하고 항상 다음 작업을 수행하는 계산된 속성을 생성했었습니다.this.$store.state.auth.isUserLoggedIn업데이트, 어레이가 함께 변경(메뉴도 변경).

mapGetter to my mythis.$store.state.auth.isUserLoggedIn나는 그것을 하는 즉시 답을 업데이트한다.

정말 고마워.

<script>
export default {
  data () {
    return { ... }
  },
  computed: {
    rightMenu () {
      return [
        { title: 'sign_in', to: '/sign_in', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_up', to: '/sign_up', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_out', to: '/sign_out',
            showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  }
}
</script>

편집 1: mapGetters를 사용한 솔루션

메뉴.vue

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return { ... }
  },
  computed: {
    ...mapGetters([
      'isUserLoggedIn'
    ]),
    rightMenu () {
      return [
        { title: 'sign_in', to: '/sign_in', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_up', to: '/sign_up', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_out', to: '/sign_out',
            showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  }
}
</script>

store.js.

나는 다음과 같은 게터를 추가했다.

...
getters: {
  isUserLoggedIn (state) {
    return state.auth.isUserLoggedIn
  }
}
...

참조URL: https://stackoverflow.com/questions/55578470/vue-js-show-hide-buttons-on-navbar-based-on-vuex-store-state-when-the-user-is-l