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为例展示安装过程：

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）：

// 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：

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作为选项之一传入：

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：

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

提交Mutation：

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

调用Action：

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

访问Getter：

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来管理应用状态。