Vue.js入门系列（二十五）：Vuex简介与基本案例

用户8589624

发布于 2025-11-14 09:16:19

1300

文章被收录于专栏：nginxnginx

Vue.js入门系列（二十五）：Vuex简介与基本案例

引言

在构建Vue.js应用时，随着应用的复杂度增加，组件间的数据共享和状态管理变得越来越困难。为了更好地管理应用状态，Vue.js 提供了一个专门的状态管理模式——Vuex。在本文中，我们将介绍Vuex的基本概念，并通过一个求和案例展示Vuex的工作原理，最后搭建一个基本的Vuex环境。

一、Vuex简介

1.1 什么是Vuex？

Vuex 是一个专为 Vue.js 应用设计的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 的核心概念包括：

State：存储应用的状态数据。
Mutations：定义更改状态的同步方法。
Actions：定义包含异步操作的业务逻辑，并提交mutations。
Getters：类似于组件的计算属性，用于从state中派生出一些状态。
Modules：当应用变得非常复杂时，可以将Vuex的store分割成多个模块，每个模块拥有自己的state、mutations、actions和getters。

1.2 Vuex的作用

Vuex 的设计灵感来源于 Flux 架构，它通过一个集中式的状态树来管理所有的状态，这样每个组件都能共享状态而不需要通过父子组件之间一层一层地传递 props。Vuex 的状态管理模式有助于：

统一管理应用状态：将状态集中管理，避免了组件间状态同步的麻烦。
使状态变化可预测：通过mutations来保证状态修改的可追溯性。
支持调试工具：Vuex 提供了强大的调试工具支持，使状态的变更和操作都可以被追踪和调试。

二、求和案例：纯 Vue 版

在介绍 Vuex 之前，我们先使用纯 Vue 的方式实现一个简单的求和功能，然后再对比使用 Vuex 的实现方式，以便更好地理解 Vuex 的作用。

2.1 纯 Vue 实现求和案例

假设我们有两个组件，一个用于输入数字并触发求和操作，另一个用于显示求和结果。

<template>
  <div id="app">
    <input v-model.number="number1" placeholder="输入第一个数字" />
    <input v-model.number="number2" placeholder="输入第二个数字" />
    <button @click="calculateSum">求和</button>
    <p>求和结果：{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: 0,
      number2: 0,
      sum: 0
    };
  },
  methods: {
    calculateSum() {
      this.sum = this.number1 + this.number2;
    }
  }
};
</script>

在这个例子中，number1和number2存储用户输入的数字，通过点击按钮触发calculateSum方法，计算并显示两个数字的和。

2.2 纯 Vue 实现的问题

这种实现方式对于简单应用是足够的，但是当应用变得复杂时，尤其是当多个组件需要共享和同步这些状态时，状态管理会变得混乱。Vuex 提供了集中管理状态的方式，可以更好地解决这个问题。

三、Vuex 工作原理图

3.1 Vuex 的工作原理

Vuex 的状态管理遵循以下流程：

State：存储应用的状态。
Getters：从state中派生数据，类似于计算属性。
Mutations：用于更改状态的唯一途径，同步执行。
Actions：包含业务逻辑，可以是异步的，最后通过commit提交mutations来更改状态。
Store：Vuex 的核心，包含state、getters、mutations、actions。

Vuex 的工作原理可以用以下流程图表示：

组件 -> Dispatch -> Actions -> Commit -> Mutations -> 更改 State
                <- State <- Getters <-

组件通过dispatch方法触发actions。
Actions可以执行异步操作，然后commit一个mutation。
Mutations同步地更改state。
Getters从state中派生出数据，供组件使用。

3.2 Vuex 工作原理的优势

这种模式的优势在于它提供了一个明确的数据流，使得状态的变化是可以预测的，并且每一步都可以被严格追踪和调试，极大地提高了复杂应用的可维护性。

四、搭建 Vuex 环境

4.1 安装 Vuex

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

npm install vuex

然后，在你的 Vue.js 项目中引入 Vuex 并创建一个store：

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    number1: 0,
    number2: 0
  },
  getters: {
    sum: state => state.number1 + state.number2
  },
  mutations: {
    setNumber1(state, value) {
      state.number1 = value;
    },
    setNumber2(state, value) {
      state.number2 = value;
    }
  },
  actions: {
    updateNumber1({ commit }, value) {
      commit('setNumber1', value);
    },
    updateNumber2({ commit }, value) {
      commit('setNumber2', value);
    }
  }
});

export default store;

4.2 将 Vuex 集成到 Vue 应用中

在创建好store后，需要将其集成到 Vue 应用中：

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 引入Vuex store

new Vue({
  store, // 将store挂载到Vue实例
  render: h => h(App)
}).$mount('#app');

4.3 使用 Vuex 实现求和案例

最后，我们修改之前的求和案例，使其通过 Vuex 来管理状态：

<template>
  <div id="app">
    <input v-model.number="number1" @input="updateNumber1" placeholder="输入第一个数字" />
    <input v-model.number="number2" @input="updateNumber2" placeholder="输入第二个数字" />
    <p>求和结果：{{ sum }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['number1', 'number2']),
    ...mapGetters(['sum'])
  },
  methods: {
    ...mapActions(['updateNumber1', 'updateNumber2'])
  }
};
</script>

在这个例子中，我们使用mapState、mapGetters、mapActions这些辅助函数来简化与 Vuex 的集成。输入框绑定了 Vuex 的state，求和结果通过getters计算得出。