Vue 中 Vuex 的核心概念是什么？

推荐答案

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

1. State：存储应用的状态数据，是唯一的数据源。
2. Getters：从 state 中派生出一些状态，类似于 Vue 组件中的计算属性。
3. Mutations：用于同步修改 state 的唯一途径，必须是同步函数。
4. Actions：用于提交 mutations，可以包含任意异步操作。
5. Modules：将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。

本题详细解读

State

State 是 Vuex 的核心，存储了应用的所有状态数据。它是响应式的，当 state 发生变化时，依赖它的组件会自动更新。

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

Getters

Getters 允许你从 state 中派生出一些状态，类似于 Vue 组件中的计算属性。它们可以接受 state 作为第一个参数，也可以接受其他 getters 作为第二个参数。

// www.javascriptcn.com code example
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);
    }
  }
});

Mutations

Mutations 是修改 state 的唯一途径。每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler），回调函数接受 state 作为第一个参数。

// www.javascriptcn.com code example
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  }
});

Actions

Actions 类似于 mutations，但它们提交的是 mutations，而不是直接变更 state。Actions 可以包含任意异步操作。

// www.javascriptcn.com code example
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

Modules

Modules 允许你将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。这对于大型应用非常有用，可以避免 store 对象变得过于臃肿。

// www.javascriptcn.com code example
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});