Vuex 的理解、使用、方法

一、Vuex 是什么

Vuex 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件通信的方式，适用于任意组件间通信

 

 二、Vuex 的工作原理图

 Vuex 的下载安装：vuex  npm i vuex

三、使用 Vuex 去编写

Vuex 的基本使用

        1.初始化数据 state ，配置 actions 、mutations ，操作文件 store.js

        2.组件中读取 vuex 中的数据 $store.state.数据

        3.组件中修改 vuex 中的数据 $store.dispatch("action中的方法名"，数据)或 $store.commit("mutations中的方法名"，数据)

        如没有网络请求或其他业务逻辑，组件中也可以越过 actions ，既不写 dispatch ，直接编写 commit

四、getters 配置

getters 概念：当 state 中的数据需要经过加工后在使用时，可以使用 getters 加工，相当于全局计算属性

五、四个 map 方法的使用

1、mapState 方法：用于帮助映射 state 中的数据为计算属性

2、mapGetters 方法：用于帮助映射 getters 中的数据为计算属性

3、mapActions 方法：用于帮助生成与 actions 对话的方法，包含 $store.dispatch(xxx)的函数

4、mapMutations 方法：用于帮助生成与 mutations 对话的方法，包含 $store.commit(xxx)的函数

住：mapActions 与 mapMutations 使用时，如需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

六、模块化 + 命名空间

1、目的：让代码更好维护，让多种数据分类更加明确

2、修改 store.js ，为了解决不同模块化命名冲突的问题，将不同模块的 namespaced：true ，之后在不同页面中引入 getter actions mutations 时，需要加上所属的模块名

3、开启命名空间后，组件中读取 state 数据

4、开启命名空间后，组件中读取 getters 数据

5、开启命名空间后，组件中调用 dispatch

6、开启命名空间后，组件中调用 commit

如有错误，请斧正！