前言
在日常Vue开发中都离不开使用Vuex进行功能的实现，本文就带你对于vuex的基本概念有一个基本的认识，方便日后更好的使用其编码。
一.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是什么？有关于其用法没有作出具体的解释。有什么疑问请在评论区提出，再一次感谢大家！
