Vuex4 基础教程：快速上手状态管理神器-原创手记-慕课网

Vuex4简介：理解状态管理的基本概念

Vuex是基于Vue.js的前端框架，提供了一种合理的方式来管理和更新应用状态，以便在组件间共享数据。它有助于解决大型应用中状态管理混乱的问题。

1.1 Vuex的历史与作用

Vuex诞生于2014年，由尤雨溪（Evan You）开发，是Vue.js的官方状态管理库。它的主要作用是将所有应用状态存储在一个单一的、共享的store中，从而为组件提供了一种集中式管理状态的方式来交换数据。

1.2 Vuex的核心组件及其功能

Store实例：是 Vuex 最重要的组件，用于存储和管理应用的状态。

State：包含应用的所有初始状态数据，可以是任何JavaScript对象。
Mutations：用于改变 state 的唯一途径。所有的更新操作必须通过 mutate 方法来触发。
Actions：允许异步操作，通过触发 mutations 来更新状态。
Getters：提供一种方法来计算并返回状态的衍生值，返回值可以被其他组件访问和使用。
Subscriptions：订阅特定的 state 变化事件。

安装Vuex4

要引入 Vuex4，需在当前 Vue.js 项目中执行以下命令：

npm install vuex

或使用 yarn：

yarn add vuex

接下来，配置项目以支持 Vuex。在你的main.js文件中添加以下代码：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementAction({ commit }) {
      commit('increment');
    },
  },
  getters: {
    getCounter: (state) => state.count,
  },
});

基本用法：Store的创建与配置

一个完整的 Vuex 应用包括以下几个关键步骤：

3.1 创建Store实例

状态：定义初始应用状态。
mutations：提供更新状态的方法。
actions：处理异步操作，触发mutations并返回一个承诺。
getters：计算并返回状态的衍生值。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 应用状态
  },
  mutations: {
    // 更新状态的方法
  },
  actions: {
    // 异步操作，触发mutations并返回一个承诺
  },
  getters: {
    // 计算并返回状态的衍生值
  },
});

3.2 使用Store管理应用状态

通过 this.$store 访问 Vuex 的 store 实例，可以执行读取、更新状态的操作。

export default {
  computed: {
    counter() {
      return this.$store.getters.getCounter;
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('incrementAction');
    },
  },
};

组件间通信：Vuex4的威力

4.1 父子组件间数据传递

父组件可以通过 this.$store 向子组件传递数据；子组件则通过回调函数从父组件接收数据。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :parent-counter="parentCounter" @increment="incrementCounter"/>
    <button @click="incrementCounter">Increment Counter</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentCounter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.$store.dispatch('incrementAction');
    },
  },
};
</script>

4.2 兄弟组件的数据共享

兄弟组件间无法直接共享数据，但可以通过 Vuex 实现共享状态。

// 父组件
export default {
  computed: {
    sharedCounter() {
      return this.$store.getters.sharedCounter;
    },
  },
  methods: {
    incrementSharedCounter() {
      this.$store.dispatch('incrementSharedCounter');
    },
  },
};

// 兄弟组件
export default {
  computed: {
    sharedCounter() {
      return this.$store.getters.sharedCounter;
    },
  },
};

实战案例：实现一个简单的Todo应用

5.1 设计应用结构

创建如下结构：

- todo-app
  - src
    - components
      - TodoList.vue
      - TodoForm.vue
    - store.js

5.2 集成Vuex管理状态

store.js：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: [],
    isEditing: null,
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    editTodo(state, { id, title }) {
      state.todos = state.todos.map((todo) => (todo.id === id ? { ...todo, title } : todo));
    },
    toggleCompleted(state, id) {
      state.todos = state.todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo));
    },
    removeTodo(state, id) {
      state.todos = state.todos.filter((todo) => todo.id !== id);
    },
  },
  actions: {
    addTodoAction({ commit }, { title }) {
      commit('addTodo', { id: new Date().getTime(), title });
    },
    editTodoAction({ commit, state }, { id, title }) {
      commit('editTodo', { id, title });
    },
    toggleCompletedAction({ commit, state }, id) {
      commit('toggleCompleted', id);
    },
    removeTodoAction({ commit, state }, id) {
      commit('removeTodo', id);
    },
  },
  getters: {
    todosCount(state) {
      return state.todos.length;
    },
    completedTodosCount(state) {
      return state.todos.filter((todo) => todo.completed).length;
    },
  },
});

5.3 添加基本功能与界面

5.3.1 TodoForm.vue

<template>
  <div>
    <input type="text" v-model="newTodoTitle" />
    <button @click="addTodo">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodoTitle: '',
    };
  },
  methods: {
    addTodo() {
      this.$store.dispatch('addTodoAction', { title: this.newTodoTitle });
      this.newTodoTitle = '';
    },
  },
};
</script>

5.3.2 TodoList.vue

<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="todo.id">
      <span v-if="!todo.completed">{{ todo.title }}</span>
      <span v-else>{{ todo.title }} (Completed)</span>
      <button @click="editTodo(todo)">Edit</button>
      <button @click="removeTodo(todo.id)">Remove</button>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    todos() {
      return this.$store.state.todos;
    },
  },
  methods: {
    editTodo(todo) {
      this.$store.dispatch('editTodoAction', { id: todo.id, title: 'Edit mode' });
    },
    removeTodo(id) {
      this.$store.dispatch('removeTodoAction', id);
    },
  },
};
</script>

高级特性与优化建议

6.1 Vuex4的中间件与模块化

使用中间件（目前仅在Vue CLI 4.4.0及以上版本可用）和模块化可以提升应用的可维护性和可扩展性。

6.2 整合Vue3特性与Vuex4

Vue3引入了许多新特性，如Composition API、响应式系统的变化等。通过使用Composition API，可以更简洁地操作Vuex store。

6.3 优化应用状态管理的最佳实践

状态单一原则：每个状态应当与其他状态无关。
异步操作：使用actions处理异步任务，确保代码逻辑清晰。
getter的合理使用：getter应当只用于计算数据，避免执行耗时的操作。

通过以上的实践，你可以更好地使用 Vuex4 管理应用状态，从而构建出高效、可维护的 Vue.js 应用。