面试题：Vue中计算属性与Vuex结合实现基本全局状态管理

Question

在一个简单的Vue项目中，有一个全局的用户登录状态（isLoggedIn）存储在Vuex中。请说明如何利用Vue的计算属性，在组件中方便地获取和使用这个全局状态，并给出具体代码示例。

Answer 1

1. 获取全局状态的原理：
   • 在Vue组件中，可以通过计算属性来获取Vuex中的状态。计算属性具有缓存机制，只有当它依赖的响应式数据发生变化时，才会重新计算。
2. 具体代码示例：
   • 首先假设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状态，并在模板中根据该状态显示不同的内容。