Vuex：全面指南及使用示例

学习 Vuex：全面指南及使用示例

Vuex 是一个专为 Vue.js 应用设计的状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本文将详细介绍 Vuex 的核心概念和使用方法，并通过一个完整的示例演示如何在 Vue.js 项目中集成和使用 Vuex。

1. 为什么需要 Vuex？

在大型 Vue.js 应用中，多个组件之间可能需要共享状态。通过父子组件的 props 和事件传递数据在某些情况下会显得复杂且难以维护。Vuex 通过集中式状态管理提供了一种更好的解决方案，使得组件之间的状态共享和管理更加容易。

2. Vuex 的核心概念

Vuex 包含五个核心部分：State, Getters, Mutations, Actions, 和 Modules。

State：存储应用的状态。
Getters：从状态中派生出新的状态。
Mutations：更改状态的唯一方法，必须是同步函数。
Actions：类似于 mutations，但包含异步操作。
Modules：将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。

3. 安装 Vuex

首先，在 Vue 项目中安装 Vuex：

npm install vuex --save

然后，在项目中引入 Vuex：

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);

4. 创建一个简单的 Vuex Store

接下来，我们创建一个简单的 Vuex store。假设我们正在开发一个计数器应用。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},getters: {doubleCount: state => state.count * 2},mutations: {increment(state) {state.count++;},decrement(state) {state.count--;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);},decrementAsync({ commit }) {setTimeout(() => {commit('decrement');}, 1000);}}
});export default store;

在这个 store 中，我们定义了：

state：存储一个计数器的值 count。
getters：定义一个 doubleCount getter，它返回 count 的两倍。
mutations：定义 increment 和 decrement 两个同步函数，用于更改 count 的值。
actions：定义 incrementAsync 和 decrementAsync 两个异步函数，分别在 1 秒后调用相应的 mutation。

5. 在 Vue 组件中使用 Vuex

现在我们创建一个 Vue 组件来使用这个 store。

<template><div><p>{{ count }}</p><p>{{ doubleCount }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button><button @click="incrementAsync">Increment Async</button><button @click="decrementAsync">Decrement Async</button></div>
</template><script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';export default {computed: {...mapState(['count']),...mapGetters(['doubleCount'])},methods: {...mapMutations(['increment', 'decrement']),...mapActions(['incrementAsync', 'decrementAsync'])}
}
</script>

在这个组件中：

使用 mapState 将 state 中的 count 映射到组件的计算属性。
使用 mapGetters 将 getters 中的 doubleCount 映射到组件的计算属性。
使用 mapMutations 将 mutations 中的 increment 和 decrement 映射到组件的方法。
使用 mapActions 将 actions 中的 incrementAsync 和 decrementAsync 映射到组件的方法。

6. 模块化 Vuex Store

对于大型应用，可以将 store 拆分为模块，每个模块拥有自己的 state、getters、mutations 和 actions。

// store/modules/counter.js
const state = {count: 0
};const getters = {doubleCount: state => state.count * 2
};const mutations = {increment(state) {state.count++;},decrement(state) {state.count--;}
};const actions = {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);},decrementAsync({ commit }) {setTimeout(() => {commit('decrement');}, 1000);}
};export default {namespaced: true,state,getters,mutations,actions
};

然后在主 store 文件中引入这个模块：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter';Vue.use(Vuex);const store = new Vuex.Store({modules: {counter}
});export default store;

使用模块化的 store 后，在组件中访问和使用模块化的状态和方法：

<template><div><p>{{ count }}</p><p>{{ doubleCount }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button><button @click="incrementAsync">Increment Async</button><button @click="decrementAsync">Decrement Async</button></div>
</template><script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';export default {computed: {...mapState('counter', ['count']),...mapGetters('counter', ['doubleCount'])},methods: {...mapMutations('counter', ['increment', 'decrement']),...mapActions('counter', ['incrementAsync', 'decrementAsync'])}
}
</script>

7. 完整的登录示例

接下来，我们演示一个更复杂的场景：用户登录。这个示例将展示如何通过 Vuex 和 API 调用进行用户认证。

定义 API 调用函数

首先，定义一个用于登录的 API 调用函数：

// api/login.js
import axios from 'axios';export function login(username, password, code, uuid) {const data = {username,password,code,uuid};return axios({url: '/login',method: 'post',data});
}

在 Vuex 中定义登录逻辑

接下来，在 Vuex 中定义登录逻辑：

// store/modules/user.js
import { login } from '@/api/login';const state = {token: '',userInfo: {}
};const getters = {isLoggedIn: state => !!state.token
};const mutations = {SET_TOKEN(state, token) {state.token = token;},SET_USER_INFO(state, userInfo) {state.userInfo = userInfo;},LOGOUT(state) {state.token = '';state.userInfo = {};}
};const actions = {async login({ commit }, loginForm) {try {const response = await login(loginForm.username,loginForm.password,loginForm.code,loginForm.uuid);const { token, userInfo } = response.data;commit('SET_TOKEN', token);commit('SET_USER_INFO', userInfo);} catch (error) {throw new Error('Login failed');}},logout({ commit }) {commit('LOGOUT');}
};export default {namespaced: true,state,getters,mutations,actions
};

在主 store 文件中引入用户模块

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';Vue.use(Vuex);const store = new Vuex.Store({modules: {user}
});export default store;

创建登录组件

最后，创建一个登录组件，使用 Vuex 进行状态管理：

<template><div><el-form :model="loginForm"><el-form-item label="Username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item label="Password"><el-input type="password" v-model="loginForm.password"></el-input></el-form-item><el-form-item label="Captcha"><el-input v-model="loginForm.code"></el-input><img :src="captchaSrc" @click="getCaptcha" /></el-form-item><el-button @click="handleLogin">Login</el-button></el-form></div>
</template><script>
import { mapActions } from 'vuex';export default {data() {return {loginForm: {username: '',password: '',code: '',uuid: ''},captchaSrc: ''};},methods: {...mapActions('user', ['login']),async handleLogin() {try {await this.login(this.loginForm);this.$router.push({ path: this.redirect || '/' });} catch (error) {this.$message.error('Login failed, please try again.');this.getCaptcha();}},getCaptcha() {// Assume getCaptcha function sets this.captchaSrc// Typically would fetch a new captcha image from backendthis.captchaSrc = '/api/captcha?uuid=' + this.loginForm.uuid;}},created() {this.getCaptcha();}
};
</script>

在这个组件中：

loginForm 用于绑定表单数据，包括用户名、密码和验证码。
captchaSrc 用于存储验证码图片的 URL。
使用 mapActions 将 user 模块中的 login action 映射到组件的方法。
handleLogin 方法调用 Vuex 的 login action 进行登录，并根据结果进行路由跳转或显示错误信息。
getCaptcha 方法获取新的验证码。

主要过程：

安装 Vuex：通过 npm 安装并在项目中引入。
创建 Store：定义 state、getters、mutations 和 actions 来管理应用状态。
组件与 Vuex 交互：使用 mapState、mapGetters、mapMutations 和 mapActions 将 Vuex 的状态和方法映射到 Vue 组件。
模块化 Store：将 store 分割为模块，便于管理和维护。
实际示例：通过用户登录示例演示如何在实际项目中使用 Vuex。

使用 Vuex 的好处：