Vuex介绍和使用

Vuex状态管理精讲

最新推荐文章于 2025-10-13 11:25:58 发布

原创最新推荐文章于 2025-10-13 11:25:58 发布 · 921 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

一.什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它解决了在大型 Vue.js 应用程序中共享和管理状态的问题，使得状态管理变得更加简单、可预测和可维护。

在 Vue.js 应用中，组件之间的通信可以通过 props 和事件进行，但随着应用的复杂性增加，组件之间的状态共享和状态变更管理变得困难。Vuex 提供了一种集中式的状态管理方案，将所有组件的状态存储在一个单一的地方，称为 “store”。

二.Vuex的核心概念

State（状态）: Vuex 使用一个单一的状态树（state tree）来存储应用的所有状态。这个状态树是响应式的，任何组件可以直接访问和监听状态的变化。
Getters（获取器）: Getters 允许组件从 Vuex store 中获取状态，并对其进行计算和过滤。类似于组件中的计算属性，Getters 可以缓存计算结果，避免不必要的重复计算。
Mutations（变更）: Mutations 是修改状态的唯一方式。它们是同步的事务，用于改变状态树中的数据。Mutations 是通过提交 (commit) 来触发，确保状态的变更是可追踪的。
Actions（动作）: Actions 用于处理异步操作和复杂的业务逻辑。它们可以包含多个 Mutations 的提交，用于改变状态。Actions 可以被组件调用，触发异步操作，并提交 Mutations 来改变状态。
Modules（模块）: Modules 允许将 Vuex store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。这使得大型应用程序中的状态管理更加模块化和可扩展。

三.Vuex的五个核心属性

1.state

state:定义了应用程序的状态，就是我们要管理的数据。
存放应用程序的状态(数据)，所有组件共享。它是Vue实例的data属性的替代品，但是通过它存储
和管理的状态，可以在整个应用程序中实现全局共享，即不同的组件可以通过定义的getter和setter访问同一状态数据。

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

2.getters

getters:用于获取State中的状态，主要用于对state进行逻辑上的组合和应用，类似于Vue组件中的计算属性。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

3.mutations

mutations:用于修改state中的数据，是唯一可以修改state的地方。mutations接收state作为第一个参数，接收payload作为第二个参数。
用于修改State中的状态，只能同步执行。Mutation必须是同步函数，因为它们不能处理异步行为，异步行为应该放在Action中处理。

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

4.actions

actions:用于异步操作和提交mutations，在actions中可以进行任何异步操作，最后再提交到
mutations中同步修改state。actions接收context作为第一个参数，其中包含了state、qetters和commit等属性。
可以包含任意异步操作(例如从服务器获取数据)，可以用Mutation通过提交(commit)来修改State.

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

5.modules

modules:用于将store分割成模块，每个模块都拥有自己的state、mutation、action、getters和子模
块，以便提高应用程序的可维护性。
将State、Getter、Mutation、Action模块化，便于组件化和模块化开发。