面试题：Vue项目中，如何使用Vuex进行简单的状态管理优化？

在Vue项目里引入Vuex的基本步骤

安装Vuex：在项目目录下，通过npm或yarn安装Vuex。

npm install vuex --save
# 或者
yarn add vuex

创建Vuex store：在项目src目录下，创建一个store文件夹，在其中创建index.js文件。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 状态数据
  },
  mutations: {
    // 修改状态的方法
  },
  actions: {
    // 异步操作等
  }
});

export default store;

在Vue应用中使用store：在main.js中引入并挂载Vuex store。

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

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

通过Vuex管理用户登录状态示例

在state中定义登录状态：在store/index.js的state中添加登录状态字段。

state: {
  isLoggedIn: false,
  userInfo: null
}

定义mutations修改登录状态：

mutations: {
  SET_LOGIN_STATUS(state, status) {
    state.isLoggedIn = status;
  },
  SET_USER_INFO(state, info) {
    state.userInfo = info;
  }
}

定义actions（如果涉及异步操作，如登录请求）：

actions: {
  async login({ commit }, userData) {
    // 模拟异步登录请求
    const response = await new Promise((resolve) => {
      setTimeout(() => {
        resolve({ success: true, user: { name: 'John', age: 30 } });
      }, 1000);
    });
    if (response.success) {
      commit('SET_LOGIN_STATUS', true);
      commit('SET_USER_INFO', response.user);
    }
  },
  logout({ commit }) {
    commit('SET_LOGIN_STATUS', false);
    commit('SET_USER_INFO', null);
  }
}

在组件中使用：

<template>
  <div>
    <button v-if="!isLoggedIn" @click="login">登录</button>
    <button v-if="isLoggedIn" @click="logout">注销</button>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  computed: {
   ...mapState(['isLoggedIn'])
  },
  methods: {
   ...mapActions(['login', 'logout'])
  }
};
</script>

相较于直接在组件内管理状态的优势

集中式管理：
- 所有状态集中在Vuex store中，便于维护和追踪。例如在一个大型项目中，多个组件可能都依赖用户登录状态，如果在组件内管理，状态分散，难以统一修改和调试。而在Vuex中，只需在store中一处修改，所有依赖该状态的组件都会自动更新。
更好的状态共享与通信：
- 不同组件可以方便地获取和修改共享状态。如一个导航栏组件和用户个人信息组件都需要显示用户登录状态，通过Vuex可以轻松实现状态共享，而不需要繁琐的父子组件传值或事件总线机制（在非父子组件间）。
便于进行状态的跟踪和调试：
- Vuex提供了devtools插件，能够记录状态的变化历史，方便开发者回溯问题。例如在用户登录状态异常时，可以通过devtools查看状态是如何一步步变化的，快速定位问题所在，而组件内管理状态则很难实现这种高效的调试。
代码结构更清晰：
- 把状态管理逻辑从组件中抽离出来，使组件代码更专注于视图展示和用户交互，提高了代码的可维护性和可测试性。例如组件只需要通过Vuex的mapState和mapActions方法引入需要的状态和操作，而不用在组件内部混杂大量状态管理代码。

星途面试题库

面试题：Vue项目中，如何使用Vuex进行简单的状态管理优化？

知识考点

面试题答案

在Vue项目里引入Vuex的基本步骤

通过Vuex管理用户登录状态示例

相较于直接在组件内管理状态的优势