Vuex—状态管理模式和库

目录

1. Vuex 是什么

2.在项目中使用 vuex

3.state ——是用来存储全局数据

4.mutation——修改全局数据和严格模式 

4.1mutation 的使用：

4.2给 matation 函数传参——通过传参可以提高 mutation 方法的通用性。例如：+1,+2,+3 功能

4.3在组件中调用 mutation 函数的第二种方式——使用 mapMutations + methods，在组件中获取 mutation 函数

5.action——是专门用来处理全局的异步操作的，它是一个函数。

6.getter

7.module

7.1module——为模块开启命名空间

7.2module——在组件中访问模块内 state 的两种方式

7.3module——在组件中调用模块内 mutation 的两种方式

7.4module——在组件中调用模块内 action 的两种方式

7.5module——在组件中访问模块内 getter 的两种方式

---

1. Vuex 是什么

   Vuex 是管理 vue 项目中的全局数据的。 作用：能够更加方便、高效地实现组件之间的数据通信。

   ① 数据的存取一步到位，不需层层传递
   ② 数据的流动非常清晰
   ③ 存储在 Vuex 中的数据都是响应式的

2.在项目中使用 vuex

   ① 安装 Vuex 的依赖包
   ② 创建 store 模块
   ③ 挂载 store 的实例对象到 new Vue() 中去

创建 store 模块——主要的实现步骤：
① 导入 Vue 和 Vuex 依赖包
② 把 Vuex 安装为 Vue 的插件
③ 创建 store 的实例对象
④ 向外导出 store 的实例对象

挂载 store 模块——主要的实现步骤：
① 导入 store 模块
② 挂载 store 实例对象

3.state ——是用来存储全局数据

state 的使用步骤：

① 在 state 中，定义全局数据
② 在组件中通过 this.$store.state.全局数据名称 访问全局数

store/index.js 

         

Left.vue

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

使用 mapState + computed，在组件中获取全局的数据
使用 mapState 辅助函数，将全局的 state 数据，映射到当前组件的 computed 中去。

mapState 使用对象格式的传参，解决命名冲突。

4.mutation——修改全局数据和严格模式 

开启严格模式

mutation 是用来修改全局数据的，它是一个函数。

特点：想要修改 state 中的全局数据，只能调用 mutation 方法！
好处：调试工具可以正常工作和有利于后期代码维护。

4.1mutation 的使用：

① 在 Vuex 中，定义 mutation 方法
② 在组件中，通过 this.$store.commit('mutation函数名') ，调用 mutation

 

4.2给 matation 函数传参——通过传参可以提高 mutation 方法的通用性。例如：+1,+2,+3 功能

 

4.3在组件中调用 mutation 函数的第二种方式——使用 mapMutations + methods，在组件中获取 mutation 函数

   使用 mapMutations 辅助函数，将全局的 mutation 方法，映射到当前组件的 methods

mapMutations 辅助函数对象格式传参，解决命名冲突问题

5.action——是专门用来处理全局的异步操作的，它是一个函数。

action 的使用步骤
① 在 Vuex 中，定义 action 方法
② 在组件中，通过 this.$store.dispatch('action函数名') ，调用 action 方法

 

给 action 函数传参——通过传参可以提高 action 方法的通用性。

 

action 接收多个参数，需要使用对象的形式。

 

使用 mapActions + methods，在组件中获取 action 函数——使用 mapActions 辅助函数，将全局的 action 方法，映射到当前组件的 methods 中。

例：实现 1s 后 -1

mapActions 辅助函数对象格式传参，解决命名冲突问题

6.getter

getter 可以理解为是 Vuex 中的计算属性，它内部依赖于 state 中全局的数据。当 state 中的值变化，getter 的值会自动更新。

   getter 的使用步骤
   ① 在 Vuex 中，定义 getter 方法
   ② 在组件中，通过 this.$store.getters.getter名称，访问 gette

store/index.js

Left.vue

在组件中使用 getter 的第二种方式

使用 mapGetters + computed，在组件中获取全局的计算属性
使用 mapGetters 辅助函数，将 getters 中的全局计算属性，映射到当前组件的 computed 中去

mapGetters 辅助函数对象格式传参，解决命名冲突问题

7.module

是 Vuex 中的模块化。根据模块化的开发思想，把有业务关联的数据和方法封装在一起。

module 的使用场景：
        当一个项目的页面数量很少，逻辑功能简单的情况下，是完全可以不使用 module 模块的。但是当一个项目的页面数量很多，逻辑功能复杂的时候，所有的全局数据、方法都集中在了一起，会导致 Vuex的结构混乱，不利于现阶段的开发和后期的维护，那么此时就需要使用模块来管理全局的数据和方法。

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

store/count.js

store/task.js

注册模块:

store/index.js

7.1module——为模块开启命名空间

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

不开启命名空间的情况下：

count.js/task.js

Left.vue

开启命名空间：

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

通过模块的注册名称访问模块下的成员，当模块开启了命名空间之后，访问时要加上模块的注册名称才能够访问到。

7.2module——在组件中访问模块内 state 的两种方式

方式一：通过 this.$store.state.模块注册名称.要访问的数据

方式二：通过 mapState 辅助函数

7.3module——在组件中调用模块内 mutation 的两种方式

在 count 模块中定义一个 mutation

方式一：通过 this.$store.commit('组件的注册名称/要调用的mutation函数名称', 参数)

方式二：通过 mapMutations 辅助函数

7.4module——在组件中调用模块内 action 的两种方式

在 count 模块中定义一个 action

方式一：通过 this.$store.dispatch('组件的注册名称/要调用的action函数名称', 参数)

方式二：通过 mapActions 辅助函数

7.5module——在组件中访问模块内 getter 的两种方式

在 count 模块中定义一个 getter

方式一：通过 this.$store.getters['模块的注册名称/要访问的getter名称']

方式二：通过 mapGetters 辅助函数