1、谈谈你对Vuex的理解
首先我们要知道组件之间的通信方法，一种是父传子，使用属性绑定。 一种是子传父，使用事件绑定。还有一种是兄弟传值，用EvenBus。但是这3种方法只适合小范围的数据共享。
如果我们需要频繁地、大范围地数据共享，那么就要使用Vuex进行数据共享。Vuex就是实现组件全局状态（数据）管理的一种机制，可以实现组件之间数据的共享。
2、Vuex的好处
- 1、能够在vuex中集中管理共享的数据，易于开发和后期维护。
- 2、能够高效地实现组件之间的数据共享，提高开发效率。
- 3、存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。
3、适用场景
4、五个核心属性
它有五个核心属性，分别是State、Getter、Mutation、Action、Module
state：存放公共数据的地方；获取数据：this.$store.state.值名称
getter：获取根据业务场景处理返回的数据；
mutations：唯一修改state的方法，修改过程是同步的；为什么要定唯一修改的方法，因为如果后期你想知道是谁修改了state的值，那么多组件调用state的值，找起来会很麻烦。所以才定一个修改state的方法，方便后期维护。
action：异步处理，通过分发操作触发mutation；
module：将store模块分割，模块化，命名空间；
5、获取State值的两种方式
第一种是：{{this.$store.state.值名称}}
<h1>{{ this.$store.state.count }} </h1>
第二种是：...mapState(["count"])
<template> <div id="sub"> <h1> <!-- 3、渲染数据 --> {{ count }} </h1> </div> </template> <script> // 1、导入vuex import { mapState } from "vuex"; export default { name: "Sub", // 2、监听state值 computed: { ...mapState(["count"]),}, }; </script>
7、定义和获取mutaion方法
1、定义方法（./store/index.js）：
mutations: { add(state) { state.count++; } },
2、获取方法：this.$store.commit("add")
<template> <div id="add"> <h1> 当前最新的count值为： {{ this.$store.state.count }} </h1> <button @click="handle">+</button> </div> </template> <script> export default { name: "Add", methods: { handle() { this.$store.commit("add"); }, }, }; </script>
