13、Vuex的基本原理

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>

8、定义和获取mutaion方法