Question

使用vue.js.我有一个身份验证文件（auth.js），其中检测到身份验证状态更改时存储用户信息。当用户信息发生变化时，需要更改网站的其他部分。我该怎么做呢？我可以导入auth.js，但那些其他部分只能使用原始状态。

Answer 1

如果您的组件依赖于全局状态，那么您应该将该状态提取到商店中，您可以使用Vuex来执行该操作。这是在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
    }
  }
})

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

这是JSFiddle：https://jsfiddle.net/69boyqbg/

vuejs传递被动数据的最佳方式

1 个答案: