vue3 vuex详解和用法（Vuex五大功能模块使用入门详解）
vue3 vuex详解和用法（Vuex五大功能模块使用入门详解）功能类似于Mutations，目的也是为了改变state中的状态，但前面我们说mutations是更改Vuex中的store中的状态的唯一方法，那么为什么又来个actions呢，这里的actions并不是直接对state中的状态进行改变，而是间接的通过提交mutation来实现的，actions的出现弥补了mutation无法异步操作的不足，这里我通过actions来修改下token的值（将token改成123456789）。前面我们提到state中的数据是不支持直接修改的，那如果有需求要修改时怎么办，Vuex为我们专门提供了Mutations属性，用于修改state中的值，有点像C#中的get和set方法（将变量定义成私有的Private内部属性，外部只能通过get和set方法来读写该变量 ）。mutations是更改Vuex中的store中的状态的唯一方法，且为同步执行，如何调用mut
前面我简单的写了下如何在Vue中使用Vuex：Vue实战开发014:状态管理模式Vuex使用详解，接下来我们继续对Vuex进行深入学习Vuex的五大功能模块。
Vuex 是什么？（官方解释）Vuex是一个专门为Vue.js应用程序开发的状态管理模式 它采用集中式存储管理所有组件的公共状态 并以相应的规则保证状态以一种可预测的方式发生变化.
个人理解：Vuex为Vue提供了一套数据状态管理框架，可以方便的管理复杂应用间的数据状态，我们在state中定义了一个数据之后，可以在项目中的任何一个组件里直接进行获取和修改，并且你的修改可以得到全局的响应变更。
前面在Vue实战030:子组件与父组件之间方法调用中提到了兄弟组件之间的传值及方法调用问题，我们发现兄弟组件之间要获取方法或者数据时还是比较繁琐的，需要通过共同的父组件作为通信桥梁才能实现兄弟组件之间的交互，这样父组件就需要监听大量的事件 还需要负责分发给不同的子组件，增加了系统的负担。但有了Vuex我们就轻松多了，全局响应式更新状态，不管组件在哪里都可以直接访问。
先在项目中安装 vuex，在项目目录下使用命令安装：npm install vuex --save（在新建项目的时候可以直接勾选Vuex，系统自动创建），在main.js中引入import axios from 'vuex'，new Vue中引入store实例即可。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({}) new Vue({ store render: h => h(App) }).$mount('#app') Vuex核心功能
Vuex拥有四大核心功能模块，它们分别是State（Vuex的数据仓库）、Mutations（只能在mutations中修改state的数据状态）、Actions（异步改变共享数据）和Getters（获取state二次处理的数据），彼此间的关系如下图所示：
state就是Vuex中的数据仓库，用于存储所有组件的公共数据，数据需初始化且不支持直接修改。直接获取state中的数据只需要在需要使用的组件页面中通过this.$store.state来获取我们定义的数据。
前面我们提到state中的数据是不支持直接修改的，那如果有需求要修改时怎么办，Vuex为我们专门提供了Mutations属性，用于修改state中的值，有点像C#中的get和set方法（将变量定义成私有的Private内部属性，外部只能通过get和set方法来读写该变量 ）。mutations是更改Vuex中的store中的状态的唯一方法，且为同步执行，如何调用mutations，我们可以通过 this.$store.commit('方法名'，参数)形式来调用，如登录验证成功后将token写入state中的token：
功能类似于Mutations，目的也是为了改变state中的状态，但前面我们说mutations是更改Vuex中的store中的状态的唯一方法，那么为什么又来个actions呢，这里的actions并不是直接对state中的状态进行改变，而是间接的通过提交mutation来实现的，actions的出现弥补了mutation无法异步操作的不足，这里我通过actions来修改下token的值（将token改成123456789）。
#state中 state: { token:'' //初始化token } #mutations中 mutations: { //存储token方法 //设置token等于外部传递进来的值 setToken(state token) { state.token = token localStorage.token = token //同步存储token至localStorage } } #actions中 actions: { changeToken({commit} token){ commit('setToken' token) } } #调用 this.$store.dispatch('changeToken' 123456789)
在其他组件里执行actions里面方法的时候，只需要执行this.$store.dispatch('方法名'，参数)即可，这样就可以全局改变改变token的值了。
这是个计算属性，简单说就是对state中的数据进行二次运算，获取新的属性值，我们正在写的项目就运用到了相当多的计算属性，通过客户给定的基本参数将其他尺寸补齐，这就需要大量的计算属性的出现了，要想拿到这个计算属性，我们只要通过this.$store.getters.dome即可得到该值。
#state中 state: { test:1 } #getters中 getters : { dome:(state)=>{ return state.test 1 } } #组件页面获取dome this.$store.getters.dome Modules属性
除了上面我们提到的四大核心功能属性，Vuex还有一个Modules属性，当我们的项目比较大时，将所有的State、Mutations、Actions和Getters属性集中到一个文件中时就比较难维护，这时Modules就给我带来便利了，Vuex 允许我们将 store 分割到不同的模块（module）中，每个模块拥有独立的State、Mutations、Actions和Getters属性，这样我们只要在对应的模块中创建对应的store.js，然后通过Modules注册到store中即可，这样方便管理和维护。
欢迎关注本人的公众号：编程手札，文章也会在公众号更新
