前言

在日常Vue开发中都离不开使用Vuex进行功能的实现，本文就带你对于vuex的基本概念有一个基本的认识，方便日后更好的使用其编码。

@[toc]

一.Vuex是什么？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性。Vuex的核心概念包括state（状态）、mutations（变更）、actions（动作）和getters（获取器）。通过Vuex，开发者可以更方便地管理应用的状态，实现组件之间的通信和数据共享。

二.个人理解

负责存储和管理组件间状态值的共享数据，就像是多线程环境下的共享变量区域。

三.核心概念

3.1.State

State是存储应用程序中所有组件共享的数据的地方。可以理解为全局共享数据源。它类似于组件中的data属性，但是State的数据可以在整个应用程序中共享。可以通过在组件中使用this.$store.state来访问State中的数据或者还可以通过mapState辅助函数来访问state中的数据。代码示例如下：

<!-- 全局共享数据源，类似于java中声明全局变量 -->
const state = () => ({
  accessToken: getAccessToken(),
  username: '',
  avatar: '',
  permissions: [],
  })
//首先，在Vue组件中引入`mapState`函数：
import { mapState } from 'vuex';
//然后，在`computed`中使用`mapState`函数来计算属性值：
computed: {
  ...mapState({
    // 将state中的count属性映射为组件的count属性
    count: state => state.count,
    // 将state中的message属性映射为组件的message属性
    message: state => state.message
  }),
  // 可以使用常规的计算属性来计算state中的属性值
  doubleCount() {
    return this.count * 2;
  }
}

3.2.Mutations

Mutations是用来修改State的唯一方式。它们是同步的函数，用于处理State的变更操作。每个Mutation都有一个字符串类型的事件类型和一个回调函数，该回调函数接受State作为第一个参数，并可以接受额外的参数来进行状态的变更。可以通过this.$store.commit方法来触发Mutation。

//变更共享数据源中的数据，不可以使用this.$store.state修改数据。通过this.$store.commit调用函数
const mutations = {
  setAccessToken(state, accessToken) {
    state.accessToken = accessToken
    setAccessToken(accessToken)
  },
  setUsername(state, username) {
    state.username = username
  },
  setAvatar(state, avatar) {
    state.avatar = avatar
  },
  setPermissions(state, permissions) {
    state.permissions = permissions
  },
}

3.3.Actions

Actions用于处理异步操作和复杂的业务逻辑。它们类似于Mutations，但是可以包含任意的异步操作。Actions通过提交Mutations来间接地变更State。每个Action都有一个字符串类型的事件类型和一个回调函数，该回调函数接受一个与Store实例具有相同方法和属性的上下文方法来触发Action。

//处理异步函数任务，通过this.$store.dispatch触发函数
const actions = {
  setPermissions({ commit }, permissions) {
    commit('setPermissions', permissions)
  },
  //异步登录
  async login({ commit }, userInfo) {
    const { data } = await login(userInfo)
    const accessToken = data[tokenName]
    if (accessToken) {
      commit('setAccessToken', accessToken)
      const hour = new Date().getHours()
      const thisTime =
        hour < 8
          ? '早上好'
          : hour <= 11
          ? '上午好'
          : hour <= 13
          ? '中午好'
          : hour < 18
          ? '下午好'
          : '晚上好'
      Vue.prototype.$baseNotify(`欢迎登录${title}`, `${thisTime}！`)
    } else {
      Vue.prototype.$baseMessage(
        `登录接口异常，未正确返回${tokenName}...`,
        'error'
      )
    }
  },

3.4.Getters

Getters用于从State中派生出一些状态。它们类似于组件中的计算属性，可以根据State的值进行计算和返回。Getters接收State作为第一个参数，可以接收其他Getters作为第二个参数。可以通过this.$store.getters来访问Getters中的数据。返回加工处理后的数据，类似于实体类getter方法。

//返回加工处理后的新的数据，返回值，类似于实体类的getter
const getters = {
  accessToken: (state) => state.accessToken,
  username: (state) => state.username,
  avatar: (state) => state.avatar,
  permissions: (state) => state.permissions,
}

总结

最后，感谢大家对于Vuex相关知识的阅读。此文章专注于帮助大家理解Vuex是什么？有关于其用法没有作出具体的解释。有什么疑问请在评论区提出，再一次感谢大家！请添加图片描述

几句话带你理解Vuex基础概念

前言