从概念到项目搭建详解——Vuex指北

前端

2023-10-16 09:12:41

Vue.js 是当今最受欢迎的前端框架之一，它以其简洁、高效和灵活性著称。然而，随着应用程序变得越来越复杂，管理应用程序中的状态和数据流变得越来越具有挑战性。这就是 Vuex 的用武之地。

Vuex 是一个专门为 Vue.js 应用程序设计的、轻量级的状态管理库。它提供了一种集中式的方式来管理应用程序的状态，使开发人员能够轻松地访问和更新应用程序中的数据。

1. 核心概念

1.1 状态

Vuex 中，应用程序的状态被存储在单一的全局对象中，称为 store。store 中的状态可以被应用程序中的任何组件访问和修改。

1.2 Mutation

Mutation 是对 store 中状态的原子性更新。Mutation 必须是同步的，并且不能直接修改 store 中的状态。相反，它们必须通过一个称为 commit 的方法来提交。

1.3 Action

Action 是一个函数，它可以触发 mutation 来修改 store 中的状态。Action 可以是异步的，并且可以包含任何 JavaScript 代码。

1.4 Getter

Getter 是一个函数，它可以从 store 中的状态派生出新的数据。Getter 可以用于将 store 中的数据格式化为更适合 UI 的形式，或者用于计算一些复杂的逻辑。

1.5 Module

Module 是一个独立的 Vuex 实例，它有自己的状态、mutation、action 和 getter。Module 可以用来将应用程序的状态和逻辑组织成更小的、更易于管理的单元。

2. 实际项目构建本地

2.1 项目初始化

首先，我们需要安装 Vuex：

npm install vuex

然后，我们需要在 Vue.js 项目中创建 store 文件夹。在 store 文件夹中，我们需要创建一个 index.js 文件。

2.2 创建 store

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: {
    incrementAsync (context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  },
  modules: {
    // 其他模块
  }
})

export default store

2.3 使用 store

在组件中，我们可以通过 this.$store 来访问 store。

<template>
  <div>
    {{ count }}
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}
</script>