Vuex4入门教程：轻松掌握Vue状态管理

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变更。通过使用 Vuex，我们能够更容易地管理复杂的应用状态，特别是在大型项目中，状态管理变得尤为重要。

Vuex4的主要特点

1. 集中式状态管理：所有应用的组件状态集中存储，使得状态变更更加可控。
2. 状态变更的可预测性：状态变更通过 Actions 和 Mutations 来触发，这些变更可以通过相应的规则来预测。
3. 模块化管理：支持将大型状态管理拆分成多个模块（modules），便于代码管理和维护。
4. 状态变更的追踪：支持状态变更的日志记录和调试，便于追踪问题。
5. 响应式：状态变更后，Vue 能够自动重新渲染视图，使得视图状态始终保持最新。

为什么要使用Vuex

使用 Vuex 可以帮助我们解决以下问题：

1. 状态分散：在一个大型应用中，组件状态可能分布在多个组件中，导致状态的复杂性和难以维护。
2. 状态变更的不确定性：组件之间通过 props 或者事件的方式交换数据，难以追踪状态的变更。
3. 状态变更的副作用：状态变更可能会影响到应用的其他部分，导致难以跟踪和调试。
4. 状态变更的不确定性：状态变更在组件之间传递，导致难以追踪状态变更的源头。

Vuex 通过集中式状态管理、状态变更的可预测性、模块化管理和状态变更的追踪等特性，解决了上述问题，使得状态管理更加简单和高效。

创建新Vue项目

首先，我们需要创建一个新的 Vue 项目。可以使用 Vue CLI 快速搭建项目，具体步骤如下：

1. 确保已经安装了 Node.js 和 npm。
2. 安装 Vue CLI：

npm install -g @vue/cli

1. 使用 Vue CLI 创建新的 Vue 项目：

vue create my-vue-app

1. 选择默认配置或者手动配置，这里我们选择默认配置。

安装Vuex4

安装 Vuex 4 的步骤如下：

1. 进入项目目录：

cd my-vue-app

1. 安装 Vuex：

npm install vuex@next --save

注意，@next 表示安装 Vuex 4 的最新版本。

配置store对象

在项目中创建 Vuex store，通常在 src 目录下创建一个名为 store 的文件夹，并在其中创建一个 index.js 文件。以下是创建 store 的步骤：

1. 创建 store 文件夹：

mkdir src/store

1. 在 store 文件夹中创建 index.js 文件：

touch src/store/index.js

1. 编写 store 配置文件：

编辑 src/store/index.js 文件，如下所示：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

1. 在主文件 main.js 中引入并使用 store：

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

createApp(App).use(store).mount('#app');

这样，我们就完成了 Vuex 的基本配置和安装。

状态（State）

状态（State）是 Vuex 中的核心概念，它代表了应用的状态。状态以对象的形式存储，并且可以通过 getter 和 mutation 进行访问和修改。

示例代码

在 src/store/index.js 文件中定义状态：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    todos: [
      { id: 1, text: 'Learn Vuex', completed: false },
      { id: 2, text: 'Practice Vuex', completed: true }
    ]
  }
});

获取状态（Getter）

Getter 是 Vuex 中用于从状态树（state tree）中检索状态的计算属性。与计算属性类似，Getter 也是响应式的，并且可以被组件注入和使用。

示例代码

在 src/store/index.js 文件中定义 Getter：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    todos: [
      { id: 1, text: 'Learn Vuex', completed: false },
      { id: 2, text: 'Practice Vuex', completed: true }
    ]
  },
  getters: {
    count(state) {
      return state.count;
    },
    undoneTodos(state) {
      return state.todos.filter(todo => !todo.completed);
    }
  }
});

修改状态（Mutation）

Mutation 是 Vuex 中修改状态的唯一方式。每个 Mutation 都是一个函数，接受两个参数：第一个参数是 state，第二个参数是载荷（payload），即 Mutation 的实际数据。

示例代码

在 src/store/index.js 文件中定义 Mutation：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    todos: [
      { id: 1, text: 'Learn Vuex', completed: false },
      { id: 2, text: 'Practice Vuex', completed: true }
    ]
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    addTodo(state, todo) {
      state.todos.push(todo);
    }
  }
});

异步操作（Action）

Action 用于处理异步操作，如异步获取数据，提交 Mutation。Action 通过 commit 方法提交 Mutation。

示例代码

在 src/store/index.js 文件中定义 Action：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    todos: [
      { id: 1, text: 'Learn Vuex', completed: false },
      { id: 2, text: 'Practice Vuex', completed: true }
    ]
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    addTodo(state, todo) {
      state.todos.push(todo);
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    addTodo({ commit }, todo) {
      commit('addTodo', todo);
    }
  }
});

定义和使用Mutations

Mutations 是状态变更的唯一方式，需要通过 commit 方法来触发。每次变更状态时，都会执行相应的 Mutation 函数。

示例代码

在组件中使用 Mutation：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

定义和使用Actions

Actions 用于处理异步操作，提交 Mutation。通常用于处理异步数据获取或提交数据到服务器。

示例代码

在组件中使用 Action：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

在大型应用中，状态管理可能会变得非常复杂。通过模块化管理，可以将不同的状态和逻辑拆分成独立的模块，使得代码更加清晰和易于管理。

示例代码

创建一个模块：

// src/store/modules/todos.js
import { createStore } from 'vuex';

const state = {
  todos: [
    { id: 1, text: 'Learn Vuex', completed: false },
    { id: 2, text: 'Practice Vuex', completed: true }
  ]
};

const getters = {
  undoneTodos: state =>
    state.todos.filter(todo => !todo.completed)
};

const mutations = {
  addTodo(state, todo) {
    state.todos.push(todo);
  }
};

const actions = {
  addTodo({ commit }, todo) {
    commit('addTodo', todo);
  }
};

export default {
  state,
  getters,
  mutations,
  actions
};

在 src/store/index.js 中使用模块：

import { createStore } from 'vuex';
import todos from './modules/todos';

export default createStore({
  modules: {
    todos
  }
});

在组件中使用模块：

<template>
  <div>
    <p>Undone Todos: {{ undoneTodos }}</p>
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapActions(['addTodo']),
    undoneTodos(state) {
      return state.todos.filter(todo => !todo.completed);
    }
  }
};
</script>
``

## 使用Getters获取状态

### 定义和使用Getters

Getter 是 Vuex 中用于从状态树中检索状态的计算属性。与计算属性类似，Getter 也是响应式的，并且可以被组件注入和使用。

#### 示例代码

在 `src/store/index.js` 文件中定义 Getter：

```js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    todos: [
      { id: 1, text: 'Learn Vuex', completed: false },
      { id: 2, text: 'Practice Vuex', completed: true }
    ]
  },
  getters: {
    count(state) {
      return state.count;
    },
    undoneTodos(state) {
      return state.todos.filter(todo => !todo.completed);
    }
  }
});

在组件中使用 Getter：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Undone Todos: {{ undoneTodos }}</p>
  </div>
</template>

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

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

动态计算状态

Getter 允许我们动态计算状态，而不是仅仅从状态树中检索数据。这种能力使得我们可以根据需要生成复杂的状态。

示例代码

在 src/store/index.js 文件中定义 Getter：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    todos: [
      { id: 1, text: 'Learn Vuex', completed: false },
      { id: 2, text: 'Practice Vuex', completed: true }
    ]
  },
  getters: {
    count(state) {
      return state.count;
    },
    totalTodos(state) {
      return state.todos.length;
    },
    completedTodos(state, getters) {
      return getters.undoneTodos.length;
    },
    undoneTodos(state, getters) {
      return state.todos.filter(todo => !todo.completed);
    }
  }
});

在组件中使用 Getter：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Total Todos: {{ totalTodos }}</p>
    <p>Completed Todos: {{ completedTodos }}</p>
    <p>Undone Todos: {{ undoneTodos }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters([
      'totalTodos',
      'completedTodos',
      'undoneTodos'
    ])
  }
};
</script>

示例代码解析

1. 定义 State：

   state: {
    count: 0,
    todos: [
      { id: 1, text: 'Learn Vuex', completed: false },
      { id: 2, text: 'Practice Vuex', completed: true }
    ]
   }

   定义了 count 和 todos 两个状态。

2. 定义 Getter：

   getters: {
    count(state) {
      return state.count;
    },
    totalTodos(state) {
      return state.todos.length;
    },
    completedTodos(state, getters) {
      return getters.undoneTodos.length;
    },
    undoneTodos(state, getters) {
      return state.todos.filter(todo => !todo.completed);
    }
   }

   定义了 count、totalTodos、completedTodos 和 undoneTodos 四个 Getter。

3. 在组件中使用：

   computed: {
    ...mapState(['count']),
    ...mapGetters([
      'totalTodos',
      'completedTodos',
      'undoneTodos'
    ])
   }

   使用 mapState 获取状态，使用 mapGetters 获取 Getter。

常见问题及解决方法

示例1：状态没有响应变化

原因：可能是状态变更没有正确地触发相应的 Mutation 或者 Action。

解决方法：

1. 确保在组件中正确地映射了相应的 Mutation 或者 Action。
2. 确保在触发变更时正确地调用了相应的方法。

在组件中使用 mapMutations 和 mapActions：

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

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

示例2：模块化管理时状态不能访问

原因：可能是模块化配置有误，或者模块中没有正确地定义状态和 getter。

解决方法：

1. 确保模块中正确地定义了状态和 getter。
2. 在主 store 中正确地引入并注册了模块。

在 src/store/index.js 中使用模块：

import { createStore } from 'vuex';
import todos from './modules/todos';

export default createStore({
  modules: {
    todos
  }
});

示例3：状态变更的调试

原因：可能是因为状态变更的逻辑复杂，难以追踪变更的原因。

解决方法：

1. 使用 Vuex 的调试工具，如 Vue Devtools，来查看状态变更的日志。
2. 通过添加调试日志或者使用 console.log 来追踪状态变更的源头。

通过以上内容，我们已经详细介绍了 Vuex 4 的安装、配置、使用方法以及一些实用技巧。希望这篇教程能够帮助你更好地理解和使用 Vuex，从而提高项目的状态管理效率。