Vue基础-07

Day-07

1. Vuex 是什么

Vuex 是 vue 项目中实现大范围数据共享的技术方案。 作用：能够方便、高效地实现组件之间的数据共享。

使用 Vuex 的好处

① 数据的存取一步到位，不需层层传递

② 数据的流动非常清晰

③ 存储在 Vuex 中的数据都是响应式的

2. 在项目中安装和配置 Vuex 

① 前期的准备：安装 Vuex 的依赖包

② 封装 Store 模块

③ 导入并挂载 Store 的实例对象 

安装 Vuex 的依赖包

运行如下的 npm 命令，在把 Vuex 安装为项目的依赖包： 

封装 Store 模块 主要的实现步骤如下：

① 导入 Vue 和 Vuex 依赖包

② 把 Vuex 安装为 Vue 的插件

③ 创建 store 的实例对象

④ 向外共享 store 的实例对象 

把 Store 实例挂载到 Vue 实例上 主要的实现步骤：

① 导入 store 模块

② 挂载 store 实例对象 

3.State 的基本使用 

1. 什么是 State

概念：State 本质上就是 Object 对象 作用：用来存储全局共享的数据

2. 组件访问 State 数据的第一种方式

在每个 Vue 组件中，可以通过 this.$store.state.全局数据名称 访问 Store 中的数据。

 

3. 组件访问 State 数据的第二种方式

基于 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性：

基于 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性：

4. 拓展：mapState 辅助函数的原理 

 

5.Mutation 的基本使用 

 我们能否在组件中直接修改 Vuex 中的数据？

Mutation 是什么

Mutation 本质上是 JavaScript 函数，专门用来变更 Store 中的数据。

特点：想要修改 State 中的数据，只能调用 Mutation 方法！

好处：能够确保修改来源的唯一性，方便调试和后期维护。 

Mutation 的使用步骤

① 在 Vuex 中定义 Mutation 方法

② 在组件中调用 Mutation 方法 

mutation 方法的第一个形参是什么？

永远都是 state 对象 

载荷（Payload）

Vuex 中的载荷就是参数的意思，通过载荷可以提高 Mutation 方法的通用性。例如：

提交载荷（Payload） 在组件中，可以通过 this.$store.commit() 方法的第二个参数来提交载荷（参数），示例代码如下：

mapMutations 辅助函数

基于 Vuex 提供的 mapMutations 辅助函数，可以方便的把 Store 中指定的方法，映射为当前组件的 methods 

mapMutations 辅助函数的用法示例

6.Action 的基本使用 

 Mutation 必须是同步函数 在项目开发中，为了保证 Store 中状态的每一次变化都是可追踪的，Vuex 规定： Mutation 必须是同步函数 。否则，vue-devtools 将无法正常追踪 Store 中数据的变化，这对大型项目的开发调试是灾难性的！

Action 是什么 Action 本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作。

定义 Action 方法

调用 Action 方法 在组件中，通过 this.$store.dispatch('xxx') 方法，即可触发指定名称的 Action 方法。示例代码如下：

在 Action 方法中定义载荷 在 Action 方法中，可以通过第二个形参的位置来定义载荷参数。示例代码如下：

调用 Action 方法时提交载荷 通过 this.$store.dispatch() 方法的第二个参数，即可提交载荷。示例代码如下：

mapActions 辅助函数

基于 Vuex 提供的 mapActions 辅助函数，可以方便的把 Store 中指定的 Action，映射为当前组件的 methods 

mapActions 辅助函数的用法示例

 

7.Getter 的基本使用 

组件中计算属性的局限性 组件中的计算属性复用性比较低。例如：

 Getter 是什么 Getter 本质上是 JavaScript 函数。

作用：它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。

定义 Getter 方法

访问 Getter 的第一种方式 在组件中，

可以通过 this.$store.getters.xxx 来访问指定 getter 的值。示例代码如下： 

访问 getter 的第二种方式

基于 mapGetters 辅助函数，可以把 store 中的 getter 映射为当前组件的计算属性。示例代码如下 

8.Module 的基本使用 

Module 是什么

Vuex 中的 Module 表示按照模块化的开发思想，把不同的数据和方法，按照彼此的关联关系进行封装。 

定义模块 每个模块都是彼此独立的，都可以拥有自己的 state、mutations、actions、getters 节点：

注册模块

namespaced（命名空间）

namespaced（命名空间）可以解决不同模块之间成员名称冲突的问题。在实际项目开发中，建议为每 个 Module 模块都开启命名空间！ 

开启命名空间

在定义模块时，只需在模块的根节点中声明 namespaced: true 选项，即可为当前模块开启命名空间： 

通过模块的注册名称访问模块下的成员

当模块启用了 namespaced: true 选项之后，模块就有了自己的命名空间。此时，模块内的成员需要通 过模块的注册名称才可以访问到。示例代码如下： 

访问命名空间下的 state 数据

在组件中访问命名空间下的 state 数据时，建议使用 mapState 函数来简化访问的过程。示例代码如下 

访问命名空间下的 mutation 方法

在组件中访问命名空间下的 mutation 方法时，建议使用 mapMutations 函数来简化访问的过程： 

访问命名空间下的 action 和 getter

建议使用 mapActions 和 mapGetters 函数来简化访问的过程，示例代码如下： 

Vuex-map函数用法汇总

如何使用全局state

• 直接使用： this.$store.state.xxx;

• map辅助函数：

如何使用modules中的state

• 直接使用： this.$store.state.模块名.xxx;

• map辅助函数：

如何使用全局getters

• 直接使用：this.$store.getters.xxx

• map辅助函数

如何使用modules中的getters

• 直接使用： this.$store.getters.模块名.xxx

• map辅助函数：

如何使用全局mutations

• 直接使用：this.$store.commit('mutation名', 参数)

• map辅助函数：

如何使用modules中的mutations（namespaced:true）

• 直接使用： this.$store.commit('模块名/mutation名', 参数)

• map辅助函数：

如何使用全局actions

• 直接使用：this.$store.dispatch('action名', 参数)

• map辅助函数：

如何使用modules中的actions（namespaced:true）

• 直接使用： this.$store.dispatch('模块名/action名', 参数)

• map辅助函数：