关于Vuex的基础使用存值及异步

目录

一.概述

二.取值

2.1.安装

 2.2.菜单栏

2.3.模块

2.4.引用

三.改值

四.异步&后台请求

         好啦今天就到这里了希望能帮到你哦！！！

---

一.概述

Vuex 是一个用于 Vue.js 应用程序的状态管理库。它主要用于集中管理应用程序中的共享状态，使得状态的变化可追踪、可调试，并且在不同组件之间共享状态变得更加简单。

在 Vue.js 中，每个组件都有自己的状态，当应用程序的规模逐渐扩大时，状态管理变得困难。Vuex 的出现就是为了解决这个问题。它采用了集中式存储管理应用的所有组件的状态，并提供了一套规则保证状态的一致性。

Vuex 的核心概念包括 state（状态）、mutations（突变）、actions（动作）和getters（获取器）。state 是存储应用程序状态的地方，mutations 是用于修改状态的方法，actions 是用于处理异步操作的方法，getters 是对状态进行包装的方法。

通过使用 Vuex，我们可以方便地在应用程序的任何地方访问和修改状态，而不必将状态逐层传递给需要的组件。这样可以提高代码的可维护性和可重用性，并且使得应用程序的状态管理更加清晰和可预测。

二.取值

思维图

.

2.1.安装

使用CMD命令窗口，并跳转到指定工作目录下创建项目

输入以下命令来安装Vuex:

  npm install vuex -S   (node的环境配置为10的执行这个命令)

 npm i -S vuex@3.6.2  (node的环境配置为18的执行这个命令)

如图 : 

在项目中的 package.json 文件中看到如图，说明安装成功

 2.2.菜单栏

在src中创建一个vuex的目录，在改目录下创建两个组件page1，page2

page1:

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page1</h1>
    <p>state中eduName的值为: </p>
      {
  {mag}} 
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    }
}
</script>
 
<style>
</style>

 page2:

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page2</h1>
    {
  {mag}}
  </div>
</template>
 
<script>