Authentication vuejs传递反应式数据的最佳方式

使用vue.js。我有一个身份验证文件（auth.js），当检测到身份验证状态更改时，将在其中存储用户信息。当用户信息更改时，网站的其他部分需要更改。 我该怎么做？

---

我可以导入auth.js，但是其他部分只能使用原始状态。

如果组件依赖于全局状态，那么应该将该状态提取到存储中，您可以使用。下面是一个基本示例，它在

loggedIn

标志设置为true时更改导航栏：

// Define our vuex store with a loggedIn state property
const store = new Vuex.Store({
  state: {
    loggedIn: false
  },
  mutations: {
    setLoggedIn(state, value) {
      state.loggedIn = value
    }
  }
})

Vue.component('navbar', {
  template: `
   <div>
    <ul>
      <li v-if="loggedIn"><a href="#" @click="logOut">Logout</a></li>
      <li v-else>Login</li>
    </ul>
   </div>`,
  computed: {
    loggedIn() {
      return store.state.loggedIn // return loggedIn from vuex
    }
  },
  methods:{
    logOut(){
      store.commit('setLoggedIn', false); // mutate loggedIn state in vuex
    }
  }
})

new Vue({
  el: '#app',
  computed:{
    loggedIn(){
      return store.state.loggedIn // return loggedIn from vuex
    }
  },
  methods: {
    logIn() {
      store.commit('setLoggedIn', true) // mutate loggedIn state in vuex
    }
  }
})

//使用loggedIn state属性定义我们的vuex存储
const store=新的Vuex.store({
声明：{
洛格丁：错
},
突变：{
setLoggedIn（状态、值）{
state.loggedIn=值
}
}
})
Vue.组件（“导航栏”{
模板：`


登录

`,
计算：{
loggedIn（）{
return store.state.loggedIn//从vuex返回loggedIn
}
},
方法：{
注销（）{
commit（'setLoggedIn'，false）；//在vuex中改变loggedIn状态
}
}
})
新Vue({
el:“#应用程序”，
计算：{
loggedIn（）{
return store.state.loggedIn//从vuex返回loggedIn
}
},
方法：{
登录（）{
commit（'setLoggedIn'，true）//在vuex中改变loggedIn状态
}
}
})

请记住，这只是一个设置登录状态以更新视图的标志，在允许用户访问敏感信息之前，您应该在服务器端执行其他检查

以下是JSFIDLE：