[开发测试] 13、Vuex的基本原理

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发测试 -> 13、Vuex的基本原理 -> 正文阅读

[开发测试]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>