如何理解vuex中的每个概念(通俗易懂)

文章目录

• • • 1. 什么是 Vuex？
    • 2. Vuex 的四个核心概念

1. 什么是 Vuex？

想象一下，你家里有一个大冰箱，所有家庭成员都可以访问这个冰箱。每个人都可以往里面放东西，也可以从里面拿东西。这个冰箱就像是 Vuex 中的“状态”，每个家庭成员（Vue 组件）都可以共享这个状态。

2. Vuex 的四个核心概念

Vuex 主要由四个部分组成：State（状态），Getters（获取器），Mutations（突变），Actions（动作）。

State（状态）
State 就是存储在“冰箱”里的数据。例如，冰箱里有水果、蔬菜、饮料等等。在 Vuex 中，我们把这些数据存储在 State 中，所有组件都可以访问这些数据。

const state = {
  count: 0
};

Getters（获取器）
Getters 就像冰箱里的标签，可以帮助你快速找到冰箱里的东西。例如，你可以有一个标签告诉你冰箱里有多少个苹果。在 Vuex 中，Getters 用于从 State 中派生出一些状态，类似于计算属性。

const getters = {
  doubleCount: state => state.count * 2
};

Mutations（突变）
Mutations 是修改“冰箱”里东西的唯一方法。例如，你吃掉了一个苹果，你需要告诉冰箱“减少一个苹果”。在 Vuex 中，Mutations 用于同步地修改 State。

const mutations = {
  increment(state) {
    state.count++;
  }
};

Actions（动作）
Actions 有点像“家务清单”，你可以在上面写下你要做的事情，比如“明天去买菜”。在 Vuex 中，Actions 用于异步操作，然后提交 Mutations 修改 State。例如，你可以从服务器获取数据，然后把数据存储到 State 中。

const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
};