Vuex

Vuex是一个专门为Vue.js应用程序的状态管理模式。它采用集中式管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（比如后台管理系统，对于判断用户是否为已登录状态，）在vuex中，所有的变量我们统称他们为一种“状态”

Vuex是采用集中式管理组件依赖的共享数据的一个工具， 可以解决不同组件数据共享的问题

vuex 初始化功能

• 安装
• 引入
• 注册(应用)
• 实例化
• 挂载

1. 安装：

   npm i vuex@3   
   这里的3指的是版本号
   

2. 引入：

在实例化里面把数据写死，其实打印this.$store会发现数据a:123是在state这个对象里面的，

声明在state上的变量，就相当于全局变量，可以在任意一个vue文件中访问到

一、state的基本使用

1. 概念

   • 大白话：专门用来声明全局变量的地方

   • 官方术语：state是防止所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在state对象中

2. 基本使用

   • 
   • 

3. 优化使用

   • 
   • 

4. 辅助函数的使用

作用：简化state变量的使用，（比上面一步的函数调用，更加简洁）

辅助函数中通过数组的形式读取state中的变量

state的使用场景=>当一个变量需要在多个vue文件中使用的时候，此刻这个变量可以声明在state中成为一个全局变量

二、mutations

1. 概念

   • 大白话：mutations是专门用来修改state中的变量的对象（属性）
   • 官方术语：state数据的修改只能通过mutations，并且必须是同步更新，目的是形成数据快照

2. 基本使用

   • 

• 

3. 优化使用
   • 

个人理解=>在app.vue中 想修改vuex中state的值，只能在matations中去修改（同步），故在app.vue中绑定点击事件，在事件处理函数中调用mutations中的方法，去修改state的值、

​ 4.辅助函数的使用-mapMutations

• 第一步：导入mapMutations
• 第二步：采用mapMutations
• 第三步:利用扩展运算符将导出的状态映射给methods

其实可以console.log(); 一下这个mapMutations中的addA这个函数，其实只要把它解构出来，直接使用即可

mutations当我们需要修改state中变量值的时候，此刻需要用到mutations

注意：mutations只能同步修改

三、actions

1. 概念
   • 大白话：actions就是可以通过异步操作调用mutations中的函数，从而修改state中的变量。
   • 官方术语：state是存放数据的，mutations是同步更新数据，actions则辅助进行异步操作
2. 基本使用
   • 
3. 优化使用
   • 
4. 辅助函数-mapActions
   • 第一步：导入mapActions
   • 第二步：采用数组形式引入actions
   • 第三步：利用扩展运算符将导出的状态映射给methods

actions的使用场景=>当我们需要修改state中变量的值的时候，此刻需要用到actions

注意：actions异步的时候才需要用到

四、getters

1. 概念
   • 大白话：除了state可以声明全局变量之外，还可以利用getters声明全局变量是从state派生出来的，getters就相当于vue中的compu计算属性
   • 官方话术：除了state之外，有时我们需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters
2. 基本使用
   • 
   • 
3. 优化使用
   • 
4. 辅助函数
   • 

使用场景