Vuex 하위 구성 요소는 이 항목에 액세스할 수 없습니다.$store(표준)

Vuex 하위 구성 요소는 이 항목에 액세스할 수 없습니다.$store(표준)

Vue 구성 요소에서 Vuex 상태에 액세스하기 위한 Vuex 설명서의 다음 지침을 따랐습니다.사용할 때마다this.$store.something내 컴포넌트에서는TypeError: Cannot read property 'something' of undefined(이 투고 하단의 스크린샷 참조).

문서상으로는

루트 인스턴스에 스토어 옵션을 제공하면 스토어가 루트의 모든 하위 구성 요소에 삽입되어 이와 같이 해당 구성 요소에서 사용할 수 있습니다.$store

...그런데 그 기능은 제 어플리케이션에서 작동하지 않는 것 같습니다.

코드는 다음과 같습니다.

main.discloss.main.discloss.

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store'

Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

store.displaces를 설정합니다.

import Vue from 'Vue'
import Vuex from 'vuex'
import router from './router'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: null
  },
  mutations: { // setters (synchronous)
    setToken (state, userData) {
      state.token = userData.token
    },
    clearToken (state) {
      state.token = null
    }
  },
  actions: { // asynchronous tasks
    signup (authData) {
      axios.post('/user/signup', {
        email: authData.email,
        password: authData.password
      })
        .then(res => {
          if (res.status === 201) {
            // what happens if signup succeeds?
          } else {
            // what happens if signup fails?
          }
        })
        .catch(error => console.log(error))
    },
    setLogoutTimer ({commit}, expiresIn) {
      setTimeout(() => {
        commit('clearToken')
      }, expiresIn * 1000)
    },
    login ({commit, dispatch}, authData) {
      axios.post('/user/login', {
        email: authData.email,
        password: authData.password
      })
        .then(res => {
          console.log(res)

          // set token with timeout
          const now = new Date()
          const tokenExpiration = new Date(now.getTime() + res.data.expiresIn * 1000)
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('tokenExpiration', tokenExpiration)
          commit('setToken', { token: res.data.token })
          dispatch('setLogoutTimer', res.data.expiresIn)

          // redirect to dashboard
          router.replace('/dashboard')
        })
        .catch(error => console.log(error))
    },
    tryAutoLogin ({commit}) {
      const token = localStorage.getItem('token')
      if (!token) {
        return
      }
      const tokenExpiration = localStorage.getItem('tokenExpiration')
      const now = new Date()
      if (now >= tokenExpiration) {
        return
      }
      commit('setToken', { token: token })
    },
    logout ({commit}) {
      commit('clearToken')
      localStorage.removeItem('token')
      localStorage.removeItem('tokenExpiration')
      router.replace('/login')
    }
  },
  getters: {
    isAuthenticated (state) {
      return state.token !== null
    }
  }
})

App.vue

<template>
  <div id="app">
    <app-header/>
    <router-view/>
  </div>
</template>

<script>
import Header from './components/Header.vue'

export default {
  name: 'App',
  components: {
    'app-header': Header
  },
  created () {
    this.$store.dispatch('tryAutoLogin')
  }
}
</script>

Header.vue

<template>
  <header id="header">
    <div class="logo">
      <router-link to="/">Home</router-link>
    </div>
    <nav>
      <ul>
        <li v-if="!auth">
          <router-link to="/signup">Sign Up</router-link>
        </li>
        <li v-if="!auth">
          <router-link to="/login">Login</router-link>
        </li>
        <li v-if="auth">
          <router-link to="/dashboard">Dashboard</router-link>
        </li>
        <li v-if="auth">
          <a @click="onLogout">Logout</a>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  computed: {
    auth () {
      return this.$store.state.token !== null
    }
  },
  methods: {
    onLogout () {
      this.$store.dispatch('logout')
    }
  },
  watch: {
    $route () {
      console.log('STORE: ', this.$store.state)
    }
  }
}
</script>

오류:

가져올 때 파괴 사용store에의main.js파일.

코드 변경 위치

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store'

Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

로.

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import { store } from './store' //Added Destructuring

Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

나한테는 효과가 있었어당신에게도 효과가 있기를 바랍니다!

네 암호는 다 좋아 보여그러나 main.js 파일에서 다음 코드를 변경합니다.

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

로.

new Vue({
   el: "#app",
   router,
   store,
   render: h => h(App)
});

언급URL : https://stackoverflow.com/questions/53092585/vuex-child-components-cannot-access-this-store-undefined