Vuex 的核心概念有哪些？

推荐答案

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

1. State：存储应用的状态数据，是唯一的数据源。
2. Getters：用于从 state 中派生出一些状态，类似于 Vue 组件中的计算属性。
3. Mutations：用于同步修改 state 的唯一途径，每个 mutation 都有一个字符串类型的事件类型和一个回调函数。
4. Actions：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
5. Modules：将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions，便于管理大型应用的状态。

本题详细解读

State

State 是 Vuex 的核心，用于存储应用的状态数据。它是一个单一的状态树，所有的组件都可以通过 this.$store.state 来访问这些状态。

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

Getters

Getters 类似于 Vue 组件中的计算属性，用于从 state 中派生出一些状态。可以通过 this.$store.getters 来访问。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

Mutations

Mutations 是唯一可以修改 state 的地方。每个 mutation 都有一个字符串类型的事件类型和一个回调函数。通过 this.$store.commit 来提交 mutation。

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

Actions

Actions 用于提交 mutation，而不是直接变更状态。Actions 可以包含任意异步操作。通过 this.$store.dispatch 来触发 action。

// 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。便于管理大型应用的状态。

// 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
  }
});