跳到主要内容

第8章：Vue 的状态管理（Vuex）

在之前的学习中，我们已经了解了Vue.js的基本功能，包括响应式数据、组件通信、生命周期等。随着应用规模的增长，组件之间的状态管理会变得越来越复杂，这时候我们需要一个专门的状态管理工具——Vuex。本章我们将深入学习如何使用Vuex进行状态管理。

8.1 Vuex 的核心概念​

Vuex 是 Vue.js 的状态管理库，专门用于管理应用中共享的状态。它将应用的状态集中管理，并提供了一系列机制来确保状态的变化是有迹可循的。以下是 Vuex 的核心概念：

1. State（状态）​

state 是Vuex中最基础的概念，用于存储应用的所有数据。它可以看作是一个全局的数据仓库，所有组件都可以访问和修改这个状态。
示例：

// store.js
export const store = {
  state: {
    count: 0,
    todos: []
  }
}

2. Getters（获取器）​

getters 是用于从 state 中派生出一些状态，类似于组件中的 computed 属性。它们可以根据 state 的值进行计算或过滤。
示例：

// store.js
getters: {
  doneTodos(state) {
    return state.todos.filter(todo => todo.done)
  }
}

3. Mutations（突变）​

mutations 是用来修改 state 的唯一途径。它们必须是同步操作，且以函数的形式定义。
示例：

// store.js
mutations: {
  INCREMENT(state) {
    state.count++
  }
}

4. Actions（动作）​

actions 是用来提交 mutations 的函数，通常用于处理异步操作。与 mutations 不同，actions 不是直接修改 state，而是通过提交 mutations 来间接修改状态。
示例：

// store.js
actions: {
  increment({ commit }) {
    commit('INCREMENT')
  },
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('INCREMENT')
    }, 1000)
  }
}

8.2 Vuex 的安装与配置​

1. 安装 Vuex​

在 Vue 3 项目中，首先需要安装 vuex：

npm install vuex@next

2. 创建 Store​

创建一个 store.js 文件，用来定义应用的状态和相关逻辑：

// store.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0,
      todos: []
    }
  },
  getters: {
    doneTodos(state) {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    INCREMENT(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('INCREMENT')
    }
  }
})

export default store

3. 在 Vue 应用中引入 Store​

在 main.js 中引入并注册 store：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

8.3 在组件中使用 Vuex​

1. 在组件中访问 State​

我们可以通过 vuex 提供的 mapState 方法将 state 映射到组件的计算属性中。
示例：

<template>
  <div>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}
</script>

2. 在组件中使用 Getters​

同样，我们可以使用 mapGetters 将 getters 映射到计算属性中。
示例：

<template>
  <div>
    <p>已完成的任务数：{{ doneTodos.length }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['doneTodos'])
  }
}
</script>

3. 在组件中触发 Mutations​

我们可以通过 vuex 提供的 mapMutations 方法将 mutations 映射到组件的方法中。
示例：

<template>
  <button @click="increment">增加</button>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['INCREMENT'])
  }
}
</script>

4. 在组件中触发 Actions​

我们可以通过 vuex 提供的 mapActions 方法将 actions 映射到组件的方法中。
示例：

<template>
  <button @click="incrementAsync">异步增加</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['incrementAsync'])
  }
}
</script>

8.4 总结​

通过本章的学习，我们掌握了如何使用Vuex进行状态管理。Vuex的核心概念包括 state、getters、mutations 和 actions，它们帮助我们将应用的状态集中管理，并确保状态的变化是有迹可循的。通过安装和配置Vuex，以及在组件中使用Vuex的方法，我们可以更好地管理复杂应用中的状态。

在实际开发中，合理使用Vuex可以显著提高应用的可维护性和扩展性。需要注意的是，Vuex主要用于管理全局共享的状态，对于局部状态，我们仍然可以使用Vue自身的响应式数据管理机制。

最后于 更新