Vue.js 在两个组件中同时使用创建的函数时出现问题

在我的应用程序中，我有一个注册区域，当您成功登录时，在我的主vue组件app.vue中，一个全局变量“auth”将取loggedin的值。我加载包含导航栏和路由器视图的标题组件 我调用header组件中创建的函数来读取“auth”的值，以显示登录链接并隐藏配置文件、聊天和注销链接 我还想在一些路由器视图（char和profile）中使用sema方法，以防止用户访问它们，并在“auth”变量不为loggedin时将路由器推到登录页面。 在这种情况下，App.vue必须运行创建的函数两次，标头组件正确读取“auth”的值，而路由器视图则不正确。 有什么解决办法吗？或任何其他方法来阻止未登录就访问已注册区域

---

更新

我已尝试vuex，但出现此错误（无法读取未定义的属性“commit”） 并且store.state.auth的值仍然为false

这是我的登录组件

<script>
/* eslint-disable */
import axios from 'axios'
import router from '../router'
import EventBus from './EventBus.vue'
  export default {
  data () {
    return {
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    login () {
      axios.post('users/login', {
        email: this.email,
        password: this.password
      }).then(res => {
        console.log('user exist ')

        localStorage.setItem('usertoken', res.data)
        this.email = ''
        this.password = ''
        router.push({ name: 'Profile' })
        this.$store.commit('login') // sets auth to true
        this.emitMethod() 
      }).catch(err => {
        console.log(err.message)
        this.error = ('User does not exist ')
        this.email = ''
        this.password = ''
      })
    },
    onReset(evt) {
        evt.preventDefault()
        // Reset our form values
        this.email = ''
        this.password = ''

        // Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      },
    emitMethod () {
      EventBus.$emit('logged-in', 'loggedin')

    }
  }
}
</script>

---

更新

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
import i18n from './i18n'
import store from './router'

Vue.use(AllIosIcon)

Vue.use(BootstrapVue)


Vue.config.productionTip = false

new Vue({
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app')

现在我犯了这个错误

---

_这个.store.commit不是一个函数

在我看来，处理这个问题的最好方法是使用

vuex

进行状态管理和

vue路由器的导航保护

查看下面的代码，了解如何实现这一点

main.js

从“Vue”导入Vue
从“Vuex”导入Vuex
从“vue路由器”导入VueRouter
Vue.use（Vuex）
Vue.use（VueRouter）
const store=新的Vuex.store({
声明：{
作者：错
},
突变：{
登录：（state）=>state.auth=true，
注销：（状态）=>state.auth=false
}
})
常量路由器=新的VueRouter({
模式：“历史”，
路线：[
{
路径：'/dashboard'，
组件：仪表板，
名称：“仪表板”，
元：{
真实的
}
},
{
路径：'/login'，
组件：登录，
名称：'登录'，
},
]
})
路由器.beforeach（（到、从、下一个）=>{
if（to.meta.requireauth&！store.state.auth）{
下一个({
路径：'/login'，
查询：{
重定向到：to.path
}
})
}
下一个（）
})
const app=新的Vue({
el:“#应用程序”，
商店，
路由器
})

我们在这里所做的是为用户的身份验证状态设置一个中心真实来源。每个

之前的

导航保护在进入路线之前运行。在这种情况下，我们检查路由是否需要身份验证（使用
requireauth
元数据）。如果路由需要身份验证，而您未登录，则它会将您重定向到登录页面

您的登录页面应具有登录用户并将身份验证状态设置为
true
的逻辑

Login.vue


// ...
导出默认值{
方法：{
登录（）{
//这里的登录逻辑
//成功登录后
此.$store.commit（'login'）//将auth设置为true
}
}
}

这可能需要更多的过程，但最终你会得到更好的结果。
您好，请更新您的问题，使其更清晰？如果添加一些代码示例，也可能会有所帮助。勾选此项问题是，您的“全局变量”
auth
来自哪里？你使用vuex吗？还有其他州的管理吗？还是只将其存储在窗口中？是否可以包括创建Vue实例的部分？我认为您没有将
store
变量注入实例
const-app=new-Vue（{el:'#app'，store，router}）
您的导出似乎有一个错误（您定义了
store
和
router
）。将最后一行替换为
导出默认值{store，router}。然后将它们导入到您的
main.js
中，作为
import{store，router}from./router'
。我按照您的说明进行了操作，但出现了此错误（无法读取未定义的属性“commit”）并且store.state.auth的值仍然为false。我会将我的登录方法添加到主要问题更新中。请确保在创建Vue实例时插入
store
变量。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
import i18n from './i18n'
import store from './router'

Vue.use(AllIosIcon)

Vue.use(BootstrapVue)


Vue.config.productionTip = false

new Vue({
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app')