vue学习笔记(二)

VueX的作用

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它的作用是集中管理 Vue 应用中多个组件共享的状态。使用 Vuex 可以更好地组织和管理 Vue 应用中的状态，并且使得状态的变化更加可追踪和可调试。

在一个大型的 Vue 应用中，如果有多个组件需要共享状态（如登录状态、用户信息等），可以使用 Vuex 来集中管理这些状态，避免了组件之间的状态传递和管理变得混乱不堪。

Vuex 的核心概念包括 state（状态）、mutation（修改状态的方法）、action（异步修改状态的方法）以及 getter（状态的计算属性）。通过这些概念，可以更好地理解和使用 Vuex 来管理 Vue 应用中的状态。

下面是一个简单的 Vuex 示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;
在这个示例中，我们创建了一个包含 count 属性的状态，并定义了两个 mutations（increment 和 decrement）、一个 action（incrementAsync）以及一个 getter（doubleCount）。这些概念就构成了 Vuex 的基本用法。