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 backend
      this.captchaSrc = '/api/captcha?uuid=' + this.loginForm.uuid;
    }
  },
  created() {
    this.getCaptcha();
  }
};
</script>

在这个组件中：

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

主要过程：

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

使用 Vuex 的好处：

• 集中管理状态：所有状态变化都在一个地方管理，使调试和维护变得更容易。
• 解耦组件：组件之间通过 Vuex 共享状态，不需要直接通信，减少了组件之间的耦合度。
• 时间旅行调试：可以方便地回溯和检查状态变化。