vuex 基本使用

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

使用 Vuex 的好处 ：

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

2 数据的流动非常清晰
3 存储在Vuex中的数据都是响应式的

Vuex里面有五个方法

◆State (存储共享数据) new Vuex.Store() 时，通过state来定义共享的数据

语法：new Vuex.Store({

state: { /* 要共享的数据 */ } })

在组件使用 State 中数据的两种方式 ：1. this.$store.state.数据项的名字。2. mapState 辅助函数 + computed 计算属性

◆Mutation (修改 State 中的数据 ) mapMutations 映射出来的是方法 要写到 methods 对象里面

◆Action (本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作。)  mapActions 映射出来的是方法 要写到 methods 对象里面

◆Getter (本质上是 JavaScript 函数,作用:它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新) mapGetters映射出来的是计算属性 写到 computed 里面

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

模块的 state 是 方法 函数 state()=>({})

使用 modules 对象注册模块 :模块的注册名称: 导入的模块对象

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

起步

在项目中安装和配置 Vuex

安装 Vuex 的依赖包

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

nmp i vuex@3.6.2 yarn add vuex@3.6.2

封装 Store 模块

主要的实现步骤如下:
1 导入 Vue 和 Vuex 依赖包

2 把 Vuex 安装为 Vue 的插件

3 创建 store 的实例对象
4 向外共享 store 的实例对象

把 Store 实例挂载到 Vue 实例上

主要的实现步骤:
1 导入 store 模块
2 挂载 store 实例对象

State 的基本使用

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

基本用法:

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

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

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

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

mutations修改公共数据

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

Mutation 的使用步骤

1 在 Vuex 中定义 Mutation 方法

2 在组件中调用 Mutation 方法

mutation 方法的第一个形参是 ：永远都是 state 对象

在组件中调用 mutation ：this.$store.commit('方法名')

在 Mutation 方法中定义载荷  ：方法名(state, 载荷的形参)  其中载荷的形参推荐命名为 payload

在调用 Mutation 方法时提交载荷 ：this.$store.commit(方法名，载荷的实参)

mapMutations 辅助函数

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

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

Mutation 必须是同步函数

 定义 Action 方法

调用 Action 方法

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

mapActions 辅助函数

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

Getter 的基本使用

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

 定义 Getter 方法

 

访问 Getter 的第一种方式

在组件中，可以通过 this.$store.getters.xxx 来访问指定 getter 的值。示例代码如下:

访问 getter 的第二种方式

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

Module 的基本使用

作用：将不同的功能放入到不同的文件

定义模块

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

 

注册模块  注：模块的 state 是方法

使用 modules 对象注册模块：模块的注册名称: 导入的模块对象

namespaced(命名空间)

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

 访问命名空间下的 state 数据

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

访问命名空间下的 mutation 方法

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

访问命名空间下的 action 和 getter 

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

模块开启命名空间 ：namespaced: true

基于 map 相关的辅助函数，访问命名空间下的成员 ：mapXXX('模块的注册名称', [ /* 要映射的成员名称 */ ])