Vue.js 状态管理：Vuex 入门教程

Vue.js 状态管理：Vuex 入门教程

什么是 Vuex？

Vuex 是一个专门为 Vue.js 应用设计的 状态管理模式。它采用集中式存储管理应用的所有组件状态，并以一种可预测的方式更改状态。Vuex 帮助你构建更易于维护、更易于测试和更易于理解的大型单页应用。

简单来说，Vuex 提供以下优势：

• 集中管理状态： 所有组件共享同一个状态树，方便统一管理和维护。
• 可预测的状态变更： 状态只能通过显式提交 mutation 进行更改，确保状态变更的透明度和可追踪性。
• 简化组件间通信： 组件之间无需通过 props 或事件总线传递数据，直接使用 store 即可获取和修改状态。
• 提高代码可读性和可维护性： 通过集中管理状态，代码结构更清晰，逻辑更易于理解。

Vuex 的核心概念

Vuex 围绕着 store (仓库) 这个核心概念，store 包含以下几个关键部分：

• state (状态)：包含应用的全部状态，是唯一数据源。
• getters (获取器)：从 state 获取派生数据，类似于计算属性。
• mutations (变更器)：同步地修改 state，是唯一修改 state 的途径。
• actions (动作)：异步操作，用于处理复杂逻辑，并通过 mutations 修改 state。

安装 Vuex

npm install vuex --save

创建 Vuex Store

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: []
  },
  getters: {
    // 获取所有已完成的 todo
    doneTodos(state) {
      return state.todos.filter(todo => todo.done);
    }
  },
  mutations: {
    // 增加计数器
    increment(state) {
      state.count++;
    },
    // 添加新 todo
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    // 修改 todo 状态
    toggleTodo(state, index) {
      state.todos[index].done = !state.todos[index].done;
    }
  },
  actions: {
    // 异步添加 todo
    asyncAddTodo({ commit }, todo) {
      // 模拟异步操作
      await new Promise(resolve => setTimeout(resolve, 1000));
      commit('addTodo', todo);
    }
  }
});

export default store;

使用 Vuex 在组件中

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="asyncAddTodo('新 todo')">异步添加</button>

    <h2>已完成的 todo：</h2>
    <ul>
      <li v-for="(todo, index) in doneTodos" :key="index">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']), // 从 state 获取 count
    ...mapGetters(['doneTodos']), // 从 getters 获取 doneTodos
  },
  methods: {
    ...mapMutations(['increment']), // 映射 mutations 方法
    ...mapActions(['asyncAddTodo']), // 映射 actions 方法
  }
};
</script>

代码解释

• state： 定义了应用状态，包含 count 和 todos。
• getters： 定义了从 state 获取派生数据的函数，比如 doneTodos 获取所有已完成的 todo。
• mutations： 定义了修改 state 的函数，每个函数只能修改 state 中的一个属性。
• actions： 定义了异步操作的函数，比如 asyncAddTodo，它使用 commit 方法调用 mutations 来修改 state。
• 组件中： 使用 mapState、mapGetters、mapMutations、mapActions 等辅助函数将 store 中的属性和方法映射到组件的计算属性和方法中，方便使用。

总结

Vuex 提供了一种强大的机制来管理 Vue.js 应用的状态，使代码更易于理解、维护和测试。建议在中大型项目中使用 Vuex 来管理复杂的状态，提高开发效率。

更多学习资料

• Vuex 官方文档： https://vuex.vuejs.org/
• Vuex 示例： https://vuex.vuejs.org/examples/
• Vuex 中文文档： https://vuex.vuejs.org/zh-CN/

实例

todo 应用：

<template>
  <div id="app">
    <div>
      <h1>{{ count }}</h1>
      <button @click="increment">+</button>
      <button @click="asyncAddTodo('新 todo')">异步添加</button>
    </div>

    <div>
      <h2>待办事项：</h2>
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          <input type="checkbox" v-model="todo.done" @change="toggleTodo(index)">
          {{ todo.text }}
        </li>
      </ul>
    </div>

    <div>
      <h2>已完成的 todo：</h2>
      <ul>
        <li v-for="(todo, index) in doneTodos" :key="index">
          {{ todo.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import store from './store'; // 导入 store

export default {
  computed: {
    ...mapState(['count', 'todos']),
    ...mapGetters(['doneTodos']),
  },
  methods: {
    ...mapMutations(['increment', 'addTodo', 'toggleTodo']),
    ...mapActions(['asyncAddTodo']),
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [
      { text: '学习 Vue.js', done: false },
      { text: '学习 Vuex', done: true }
    ]
  },
  getters: {
    doneTodos(state) {
      return state.todos.filter(todo => todo.done);
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    toggleTodo(state, index) {
      state.todos[index].done = !state.todos[index].done;
    }
  },
  actions: {
    asyncAddTodo({ commit }, todo) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      commit('addTodo', todo);
    }
  }
});

export default store;

这个示例展示了如何使用 Vuex 管理一个简单的 todo 应用的状态，包括计数器、待办事项列表和已完成的 todo 列表。通过使用 Vuex，我们可以将状态集中管理，并通过 mutations 和 actions 进行安全、可预测的修改。