【前端每日基础】day42——关于 Vuex 共有几个属性，哪里可以书写同步任务，哪里可以书写异步任务？如果在 Vuex 中调用请求，在 Vuex 中会经历的流程大致描述一下

Vuex 是 Vue.js 的一个状态管理模式，它集中式地存储和管理应用的所有组件的状态。Vuex 提供了以下几个核心属性，每个属性在状态管理中有不同的用途：

Vuex 共有的几个属性：
State：

用于存储应用的状态。
可以通过 this.$store.state 或在组件中通过 mapState 辅助函数访问。
Getters：

类似于组件中的计算属性，用于派生出一些状态。
接受 state 作为其第一个参数，可以用于过滤或计算数据。
可以通过 this.$store.getters 或在组件中通过 mapGetters 辅助函数访问。
Mutations：

用于更改 state，必须是同步的。
每个 mutation 都有一个类型（字符串常量）和一个回调函数，回调函数是实际进行状态变更的地方。
可以通过 this.$store.commit 方法触发。
Actions：

用于提交 mutations，可以包含异步操作。
每个 action 都有一个类型（字符串常量）和一个回调函数，回调函数可以包含异步逻辑。
可以通过 this.$store.dispatch 方法触发。
Modules：

用于将 store 分割成多个模块，每个模块有自己的 state、getters、mutations 和 actions。
适用于大型应用。
同步任务和异步任务
同步任务：在 mutations 中书写，因为 mutations 必须是同步函数。这是为了确保状态变更的可追踪性。

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

异步任务：在 actions 中书写，因为 actions 可以包含异步操作，并且可以在异步操作完成后再提交 mutations 以改变状态。

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

在 Vuex 中调用请求的流程：
组件中调用 dispatch 触发 action：

this.$store.dispatch('fetchData');

在 Vuex 中调用请求的流程：
组件中调用 dispatch 触发 action：
组件中调用 dispatch 方法来触发一个 action。这个 action 通常包含异步操作，如 API 请求。

// 在组件中
this.$store.dispatch('fetchData');

在 action 中执行异步操作：
action 接受 context 作为参数（可以解构出 commit 和 state），在 action 中执行异步操作，如 API 请求。

// 在 store.js 中
const store = new Vuex.Store({
  state: {
    data: null,
    loading: false,
    error: null,
  },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    },
    setLoading(state, isLoading) {
      state.loading = isLoading;
    },
    setError(state, error) {
      state.error = error;
    },
  },
  actions: {
    async fetchData({ commit }) {
      commit('setLoading', true);
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        commit('setData', data);
      } catch (error) {
        commit('setError', error);
      } finally {
        commit('setLoading', false);
      }
    },
  },
});

请求成功后，在 action 中调用 commit 提交一个 mutation：
异步操作（如 API 请求）完成后，通过 commit 提交一个或多个 mutation 来更新 state。

actions: {
  async fetchData({ commit }) {
    commit('setLoading', true);
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      commit('setData', data);
    } catch (error) {
      commit('setError', error);
    } finally {
      commit('setLoading', false);
    }
  },
}

mutation 同步更新 state：
mutation 是同步函数，用于修改 state，如设置加载状态、更新数据或设置错误信息。

mutations: {
  setData(state, payload) {
    state.data = payload;
  },
  setLoading(state, isLoading) {
    state.loading = isLoading;
  },
  setError(state, error) {
    state.error = error;
  },
}

组件监听 state 的变化，并自动更新视图：
组件通过计算属性（或直接访问 state）监听 state 的变化，当 state 更新时，Vue 的响应式系统会自动更新视图。

computed: {
  data() {
    return this.$store.state.data;
  },
  loading() {
    return this.$store.state.loading;
  },
  error() {
    return this.$store.state.error;
  }
}

综述
通过这种流程，Vuex 实现了从组件触发异步操作，到状态更新，再到组件视图更新的完整数据流动过程。这种模式确保了状态的集中管理和变更的可追踪性，使应用状态管理更加清晰和可维护。