16.1.2 安装与体验Vuex -TypeScript和Vue从入门到精通(五)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(五)

### 16.1.2 安装与体验Vuex

在Vue.js的应用开发中，随着应用复杂度的增加，组件间的状态管理变得尤为重要。Vuex作为Vue.js的官方状态管理模式和库，提供了一种集中管理所有组件共享状态的方式，并以相应的规则保证状态以一种可预测的方式发生变化。本章节将详细介绍如何在Vue项目中安装和体验Vuex，帮助读者从零开始掌握Vuex的基本用法。

#### 16.1.2.1 理解Vuex的核心概念

在深入安装和体验Vuex之前，先简要回顾一下Vuex的几个核心概念，这对于后续的学习至关重要。

- **State**：Vuex使用单一状态树（Single Source of Truth），这意味着应用的所有状态都存储在一个对象中，这个对象就是State。
- **Getters**：允许从State中派生出一些状态，例如对列表进行过滤并计数。
- **Mutations**：更改Vuex的store中状态的唯一方法是提交mutation。Mutation必须是同步函数。
- **Actions**：类似于mutation，不同之处在于Action可以包含任意异步操作。
- **Modules**：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。为了解决这个问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

#### 16.1.2.2 安装Vuex

在Vue项目中安装Vuex非常简单，通常使用npm或yarn作为包管理工具进行安装。以下以npm为例展示安装过程：

```bash
npm install vuex@next --save  # 对于Vue 3项目，注意使用@next标记以获取与Vue 3兼容的版本
# 或者对于Vue 2项目
npm install vuex --save
```

安装完成后，Vuex库将被添加到项目的`node_modules`目录中，并可以在`package.json`文件的依赖列表中看到它。

#### 16.1.2.3 配置Vuex Store

安装Vuex之后，接下来需要在Vue应用中配置Vuex Store。这通常涉及创建一个新的store文件（例如`store/index.js`或`store/index.ts`），并在其中定义state、mutations、actions和getters（如果需要的话）。

以下是一个简单的Vuex Store配置示例（适用于Vue 3）：

```javascript
// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementIfOdd({ commit, state }) {
      if ((state.count + 1) % 2 === 0) {
        commit('increment');
      }
    },
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    countDoubled(state) {
      return state.count * 2;
    }
  }
});
```

在Vue 2项目中，配置方式略有不同，但大体相似，主要是`createStore`函数替换为`new Vuex.Store()`。

#### 16.1.2.4 在Vue应用中使用Vuex Store

配置好Vuex Store之后，接下来需要在Vue应用中引入并使用它。这通常通过Vue应用的创建过程来完成。

对于Vue 3，可以在创建Vue应用实例时，通过`createApp`函数的`.use()`方法全局注册Vuex Store：

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);

app.use(store);

app.mount('#app');
```

对于Vue 2，则是在创建Vue实例时，将store作为选项之一传入：

```javascript
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});
```

#### 16.1.2.5 访问和修改Vuex Store中的状态

在Vue组件中，可以通过`this.$store`访问Vuex Store。然而，更推荐的做法是使用`computed`属性来访问state和getters，以及使用`methods`来提交mutations和调用actions。

- **访问State**：

```javascript
  computed: {
    count() {
      return this.$store.state.count;
    },
    // 或者使用辅助函数mapState
    ...mapState(['count'])
  }
  ```

- **提交Mutation**：

```javascript
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    // 或者使用辅助函数mapMutations
    ...mapMutations(['increment'])
  }
  ```

- **调用Action**：

```javascript
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
    // 或者使用辅助函数mapActions
    ...mapActions(['incrementAsync'])
  }
  ```

- **访问Getter**：

```javascript
  computed: {
    countDoubled() {
      return this.$store.getters.countDoubled;
    },
    // 或者使用辅助函数mapGetters
    ...mapGetters(['countDoubled'])
  }
  ```

#### 16.1.2.6 实战体验

为了更深入地理解Vuex，我们可以创建一个简单的Vue应用，其中包含一个计数器功能，通过Vuex来管理计数器的状态。在这个例子中，你可以尝试增加或减少计数器的值，观察状态的变化以及如何通过Vuex的mutations和actions来更新这些状态。

#### 结语

通过本章节的学习，你应该已经掌握了如何在Vue项目中安装和配置Vuex，以及如何在Vue组件中访问和修改Vuex Store中的状态。Vuex为Vue应用提供了强大的状态管理能力，使得开发复杂应用时状态的管理变得清晰和可预测。随着你对Vuex的深入理解，你将能够构建出更加健壮和可维护的Vue应用。在后续章节中，我们将进一步探索Vuex的高级特性和最佳实践，帮助你更高效地利用Vuex来管理应用状态。

该分类下的相关小册推荐：

Vue源码完全解析

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(四)

VUE组件基础与实战

移动端开发指南

Vue.js从入门到精通(一)

Vue3技术解密

Vue.js从入门到精通(三)

Vue.js从入门到精通(四)

TypeScript和Vue从入门到精通(二)

Vue原理与源码解析

vue项目构建基础入门与实战