面试题答案
一键面试- 获取全局状态的原理:
- 在Vue组件中,可以通过计算属性来获取Vuex中的状态。计算属性具有缓存机制,只有当它依赖的响应式数据发生变化时,才会重新计算。
- 具体代码示例:
- 首先假设
isLoggedIn
已经在Vuex的state
中定义,并且有对应的getter
(这里以简单的直接返回state.isLoggedIn
为例)。 - Vuex部分代码(假设在
store.js
文件中):
- 首先假设
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
isLoggedIn: false
},
getters: {
getIsLoggedIn(state) {
return state.isLoggedIn;
}
}
});
export default store;
- Vue组件部分代码(假设在
App.vue
文件中):
<template>
<div>
<p v-if="isLoggedIn">用户已登录</p>
<p v-else>用户未登录</p>
</div>
</template>
<script>
export default {
computed: {
isLoggedIn() {
return this.$store.getters.getIsLoggedIn;
}
}
};
</script>
<style scoped>
</style>
在上述代码中,通过计算属性isLoggedIn
获取了Vuex中的isLoggedIn
状态,并在模板中根据该状态显示不同的内容。