前言

• 在项目中，都是使用的是模块化，Vuex基础只是方便掌握基础；

一、初始化功能

• 目标文件：
  • main.js；
• 

二、state

• 共享状态数据；
• 组件中如何获取数据？

2.1 使用方式

2.1.1 this.$store

• 组件中可以使用 this.$store 可以获取到Vuex中的 store实例 ，可以通过 state属性 获取数据；

this.$store.state.数据属性名

2.1.2 ✅辅助函数 - mapState

• 辅助函数 - mapState；
• ❗ 注意：
  • mapState 需要 解构 在 计算属性(computed)中；

<script>
    // 1.导入辅助函数
    // mapState是辅助函数，帮我们把store实例对象中的数据映射到 组件的计算属性中，它属于一种方便的用法
    import { mapState } from 'vuex';

    export default {
        // 2.利用扩展运算符将导出的状态映射给计算属性
        computed: {
            // 1.data数据属性无重名 - 数组传参 - 原样映射
            ...mapState(['state中的数据属性名1', 'state中的数据属性名2', …]);

            // 2.data数据属性有重名 - 对象传参 - 别名映射
            ...mapState({
                新属性名: '旧属性名'
            });
        }
        // 3.使用的时候，按照计算属性使用方法使用即可
    }
</script> 

• 示例展示：

三、mutations

• mutations 中 只能写 同步代码；
• 同步修改 state 的数据；
• state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照；
  • 数据快照： 一次mutations的执行，立即得到一种视图状态，因为是立刻，所以必须是同步的；
• 语法：
  • 格式说明：mutations是一个对象。对象中存放着修改state的方法；

  mutations: {
      // 方法里的参数：
      // 第一参数：satte => 当前store实例中state的属性名（该参数是固定参数）
      // 第二个参数： payload => 载荷、运输参数，调用mutations的时候，可以传递参数、传递荷载
  
      方法名 (state, payload) {
           // 函数体
      }
  }
  

• 如何在组件中使用mutations？

3.1 使用方式

3.1.1 原始方法

• 原始方法；

methods: {
    fn (payload) {
        // 使用mutations提供的commit方法，将入参提交给mutations中对应的方法使用
        this.$route.commit('mutations方法名', payload)
    }
}

• 示例展示：

3.1.2 辅助函数 - mapMutations

• ❗ 注意：
  • mapMutations 解构在 methods 中；

// 1.导入辅助函数
import { mapMutations } from 'vuex';

methods: {
    // payload ➡ 传递的参数，对 state 进行修改

    // 不需要对 mutations 中的方法重命名
    ...mapMutations(['mutations中的方法名']);
    fn (payload) {
        this.mutations中的方法名(payload)
    }

    // 需要对 mutations 中的方法进行重命名
    ...mapMutations({
        新的方法名: 'mutations中的方法名'
    })
    fn (payload) {
        this.新的方法名(payload)
    }   
}

• 示例展示：

四、actions

• actions中写异步代码；
• state 是 存放数据 、mutations 是 同步更新数据、actions 则负责进行 异步操作；
• 语法：

  actions: {
      // 获取异步的数据：context表示当前store的实例，可以通过 context.state 获取状态，也可以通过 context.commit 来提交mutations。也可以 context.dispatch调用其他的action
      方法名(context, payload) {
          context.commit('mutations的方法名', payload)
          // 函数体
    }
  }
  

  • 示例展示：

4.1 使用方式

4.1.1 原始调用

this.$store.dispatch('actions的方法名', payload)

4.1.2 辅助函数 - mapActions

• ❗ 注意：
  • mapActions 解构在 methods 中；

import { mapActions } from 'vuex'

// 解构在 methods 中
methods: {
  ...mapActions('[actions的方法名]')
  // 直接通过 this.方法 就可以调用

  ...mapActions({
      新的方法名: 'actions中的方法名'
  })
}

• 示例展示：

五、getters

• 可以理解成计算属性；
• 除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters；
• 语法：

  getters: {
      // getters函数的第一个参数是state
      // 必须要有返回值
      return xxx
  }
  

• 使用方式：
  • 语法：

    import { mapGetters } from 'vuex'
    computed: {
        ...mapGetters(['getters中的方法名'])
    }
    

  • 示例展示：
• ❗注意：
  • 解构 getters 必须在 computed中；