vue面试题什么是vuex

Vuex 是 Vue.js 的状态管理模式，其核心是：1、集中式存储管理应用的所有组件的状态，2、通过规则确保状态以一种可预测的方式发生变化。Vuex 专为 Vue.js 应用设计，借助 Vue.js 的细粒度数据响应机制来高效地进行状态更新。

一、Vuex 的核心概念

Vuex 的核心概念包括以下几个部分：

State（状态）：存储单一状态树，整个应用的状态集中管理。
Getter（获取器）：从状态树中派生出状态，类似于 Vue 组件中的计算属性。
Mutation（变更）：更改 Vuex 的 store 中的状态，且必须是同步函数。
Action（动作）：提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module（模块）：将 store 分割成模块，每个模块拥有自己的 state、getter、mutation 和 action。

二、State（状态）

State 是 Vuex 的核心部分，负责存储应用的所有状态。与传统的组件状态管理不同，Vuex 采用单一状态树（single state tree），即一个对象包含全部应用层级状态。这样设计的好处是方便调试和管理，尤其在大型应用中。

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

通过 store.state.count 访问状态。

三、Getter（获取器）

Getter 类似于 Vue 组件的计算属性，用于从 store 中派生出一些状态。它们可以缓存并在依赖未发生变化时高效地重新计算。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

访问方式为 store.getters.doneTodos。

四、Mutation（变更）

Mutation 是唯一可以改变 Vuex 状态的地方。每个 Mutation 都有一个字符串的事件类型（type）和一个回调函数（handler），这个回调函数就是我们实际进行状态更改的地方，且必须是同步函数。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

通过 store.commit('increment') 来调用 mutation。

五、Action（动作）

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

通过 store.dispatch('incrementAsync') 来调用 action。

六、Module（模块）

为了更好地管理复杂应用的状态，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、getter、mutation 和 action，甚至是嵌套子模块。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

访问方式为 store.state.a 和 store.state.b。

总结

Vuex 提供了一种集中式的状态管理方式，适用于中大型 Vue.js 应用开发。通过 State、Getter、Mutation、Action 和 Module 五大核心概念，Vuex 能够帮助开发者更高效地管理应用状态，确保状态变化的可预测性和一致性。为了更好地使用 Vuex，建议开发者在实际项目中多加练习，熟悉各个核心概念及其应用场景。同时，合理地划分模块，确保代码的可维护性和可扩展性。