Vue知识点之Vuex

Vuex是vue项目中实现大范围数据共享的技术方案

作用：能够方便，高效地实现组件之间的数据共享

使用vuex的好处

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

2.数据的流动非常清晰

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

安装vuex包 yarn add vuex@3.6.2

Vuex的五大知识点

一. State是存储共享数据****

State作用为存储全局共享数据

1. 定义数据：

2. 使用数据：

在任何组件中都可以访问

this.$store.state.count

二. Mutations是修改state中的数据****

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

让数据修改的来源更清晰，保证修改的唯一渠道

1. 定义函数：

Mutations要修改state的数据，第一个参数永远都是state

如果需要传参，则第二个参数永远都是payload载荷

2. 调用函数：

This.$store.commit( ‘add’ , 10)

注意点： mutations必须是同步函数，不能有异步操作，要交给actions处理

三.Action的基本使用****

Action本质是javaSript函数，专门来处理vuex中的异步操作

所有的state修改必须得经过mutation，但是mutation只处理同步函数，异常函数则由action

1. 定义函数：

Actions要调用mutations函数，第一个参数永远都是context

如果需要传参，第二个参数永远都是payload载荷

2. 调用函数：

This.$store.dispatch (‘asyncadd’ , 10)

四：Getter是vuex中的计算属性****

1. 定义函数：

Getter第一个形参是state，getter是计算属性，得依赖state

2. 使用计算属性：

this.$store.getters.isAllDone

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

Modules作用：如果把所有的数据都定义在vuex全局，后期维护会非常的麻烦，所以按业务模板拆分子模块维护会更加方便

1. 用法：

定义子模块并导出：

导入子模块并注册：

补充点： 辅助函数汇总：****

让程序员更简单的访问vuex中的数据或方法

用法：

1. 按需导入辅助函数

Import  { mapState , mapMutations , mapActions , mapGetters  } from ‘ vuex’

2. 在computed或者methods中调用并展开结果   

Computed：{

...mapState（需要导入的数据名）

}