Vue.js 및 Vuex this.$store 반환을 새 Vue({store})에 추가한 후 정의되지 않음

Vue.js 및 Vuex this.$store 반환을 새 Vue({store})에 추가한 후 정의되지 않음

여기서 사용 가능한 해결책을 살펴보았지만, 제 상황에 맞는 해결책은 하나도 없는 것 같습니다.

1. Vue.js 및 vuex: 이것.$store가 정의되지 않았습니다.
2. Vuex가 저장합니다.Vue.js 구성 요소에 $store가 정의되지 않았습니다.
3. https://pinoria.com/how-to-fix-this-store-is-undefined-with-vue-js-and-vuex/

저장 개체를 main.js로 가져왔습니다.기록을 통해 확인했습니다.

내 vue 인스턴스에 스토어를 추가했지만 이를 통해 액세스할 수 없습니다.$내 부품에 저장합니다.

Error - Error in v-on handler (Promise/async): "TypeError: Cannot read 
properties of undefined (reading 'error')"

console.log(this.$store) in my components returns undefined.

코드 및 상자 링크 - https://codesandbox.io/s/vdr5js

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state: {
    token: null,
    user: null,
    isUserLoggedin: false
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      if (token) {
        state.isUserLoggedIn = true
      } else {
        state.isUserLoggedIn = false
      }
    },
    setUser (state, user) {
      state.user = user
    }
  },
  actions: {
    setToken ({commit}, token) {
      commit('setToken', token)
    },
    setUser ({commit}, user) {
      commit('setUser', user)
    }
  }
})

메인.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an 
alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import { sync } from 'vuex-router-sync'
import 'vuetify/dist/vuetify.min.css'
import store from '@/store/store'

Vue.config.productionTip = false

console.log(store) // returns store object

Vue.use(Vuetify)

sync(store, router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  vuetify: new Vuetify(),
  components: { App },
  template: '<App/>'
})

로그인 구성 요소

<script>
import AuthenticationService from '@/services/AuthenticationService'
export default {
  data () {
    return {
      email: '',
      password: '',
      error: null
    }
  },
  methods: {
    async login () {
      try {
        const response = await AuthenticationService.login({
          email: this.email,
          password: this.password
        })
        this.$store.dispatch('setToken', response.data.token) //throw error
        this.$store.dispatch('setUser', response.data.user)
      } catch (error) {
        this.error = error.responsedata.error
      }
    }
  }
}
</script>

제가 접근할 수 있습니다.179달러와 이것.$store in the Header.vue component 제가 잘못하고 있는 것이 있으면 말씀해 주세요.

언급URL : https://stackoverflow.com/questions/74807070/vue-js-and-vuex-this-store-return-undefined-after-adding-it-to-new-vuestore