轻松上手使用Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它主要用于管理应用程序中的全局状态，提供一个集中式存储库，并且以可预测的方式来更新这些状态。以下是 Vuex 的基本用法和一些关键概念：

1.安装 Vuex

首先，需要在 Vue.js 项目中安装 Vuex：

npm install vuex

2.创建一个 Store(仓库)

每个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

export default store;

3.将 Store 注入到 Vue 实例中

创建 Vue 实例时，将 store 作为选项传入：

import Vue from 'vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

4.核心概念

• State（状态）‌

State 是存储应用数据的地方，可以通过 this.$store.state 访问：

console.log(this.$store.state.count);

或者使用 mapState 辅助函数在组件中更方便地访问：

import { mapState } from 'vuex';

export default {
  computed: mapState(['count'])
};

• Mutations（变更）‌

Mutations 是唯一允许更新应用状态的方法，但是必须是同步函数。第一个参数是 state，可以传入额外的参数，即 commit 的 payload：

this.$store.commit('increment');

• ‌Actions‌

Actions 类似于 Mutations，不同点在于：

• Action 提交 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

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

• ‌Getters‌

Getters 可以认为是 store 的计算属性，可以对 state 进行计算并返回结果：

computed: { count() { return this.$store.getters.count; } }

或者使用 mapGetters 辅助函数：

import { mapGetters } from 'vuex'; export default { computed: mapGetters(['count']) };

5.模块（Modules）

当应用变得复杂时，可以将 Vuex 的 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块：

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

6.总结

Vuex 提供了结构化和可预测的状态管理方案，尤其适用于大型单页应用。通过 state、mutations、actions 和 getters 这几个核心概念，可以清晰地管理应用的状态和状态变更逻辑。在实际应用中，合理使用 Vuex 可以显著提高代码的可维护性和可读性。