Vuex的基础使用存值及异步

news2024/9/27 17:34:33

目录

一、概述

( 1 )  讲述

( 2 )  概念

( 3 )  作用

二、取值

1. 安装

2. 菜单栏

3. 模块

4. 引用

三、改值

四、异步&后台请求

带来的获取

一、概述

( 1 )  讲述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的变更可追踪和可维护。

在 Vue.js 应用中，组件之间的通信是通过 props 和事件来实现的，但是当应用变得复杂时，组件之间的通信会变得困难和混乱。Vuex 提供了一种集中式存储管理应用的状态的方式，将所有组件的共享状态抽取出来，以一个全局的单一状态树来管理。

( 2 )  概念

Vuex 的核心概念包括：

  1. State（状态）：Vuex 使用一个单一的状态树来管理应用的所有状态，即一个对象包含了全部的应用层级状态。可以通过 this.$store.state 来访问状态。

  2. Getters（获取器）：Getters 可以理解为 store 的计算属性。可以通过定义一些 getter 函数来获取 state 中的值，类似于 Vue 中的计算属性。

  3. Mutations（变更）：Mutations 是唯一允许修改状态的地方。每个 mutation 都有一个字符串的事件类型和一个回调函数，通过调用 store.commit 方法来触发 mutation。

  4. Actions（动作）：Actions 类似于 mutations，但是可以包含任意异步操作。通过调用 store.dispatch 方法来触发 action。Action 可以包含多个 mutation，通过提交 mutation 来改变状态。

  5. Mutations（变更）: 是 Vuex 中用于修改状态的方法。它是唯一允许修改状态的地方，类似于事件的处理器。每个 mutation 都有一个字符串的事件类型和一个回调函数，通过调用 store.commit 方法来触发 mutation。

  6. Modules（模块）：Vuex 允许将 store 分割成模块。每个模块拥有自己的 state、getters、mutations 和 actions，可以通过模块化的方式组织和管理复杂的应用。

通过使用 Vuex，我们可以更好地组织和管理应用的状态，使得状态的变更更加可追踪和可维护。同时，也可以方便地在组件中获取和修改状态，简化了组件之间的通信。

( 3 )  作用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它解决了在大型应用中，组件之间共享状态的问题。Vuex 将应用的状态存储在一个单一的、可预测的状态树中，并提供了一些工具来修改和获取状态，以及追踪状态的变化。

以下是 Vuex 的主要作用：

1. 集中式状态管理：Vuex 将应用的状态集中存储在一个单一的状态树中。这样可以方便地管理和追踪状态的变化，避免了状态分散在多个组件中导致的混乱和难以维护的问题。

2. 组件之间共享状态：在大型应用中，多个组件可能需要共享某些状态，例如用户登录状态、购物车数量等。Vuex 提供了一个中央存储库，使得多个组件可以方便地访问和修改共享状态。

3. 状态的可追踪和可维护性：Vuex 使用了响应式的状态管理，当状态发生变化时，相关的组件会自动更新。同时，Vuex 提供了一些工具来追踪状态的变化，例如通过插件可以记录每个 mutation 的变更历史。这样可以更好地追踪和调试状态的变化。

4. 简化组件通信：在 Vue.js 中，组件之间的通信可以通过 props 和事件来实现。但是当应用变得复杂时，组件之间的通信会变得困难和混乱。Vuex 提供了一种集中式的数据流模式，使得组件之间的通信更加直观和可控。

总而言之，Vuex 的主要作用是提供了一种集中式的状态管理模式，使得应用的状态更加可追踪和可维护，简化了组件之间的通信，提高了开发效率和代码可维护性。

二、取值

思维图

基于博客中的代码进行续写 : ElementUI结合Vue完成主页的CUD(增删改)&表单验证

1. 安装

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

输入以下命令来安装Vuex:

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

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

如图 : 

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

2. 菜单栏

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

Vuex01

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>Vuex01</h1>
    <p>state中eduName的值为: </p>
      {{mag}} 
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    }
}
</script>

<style>
</style>

Vuex02

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

<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    }
  }
</script>

<style>
</style>

到项目中src的router的index.js文件中配置路径

import Vuex01 from '@/views/vuex/Vuex01'
import Vuex02 from '@/views/vuex/Vuex02'
      {
        path: '/vuex/Vuex01',
        name: 'Vuex01',
        component: Vuex01
      },{
        path: '/vuex/Vuex02',
        name: 'Vuex02',
        component: Vuex02
      }

在src中的components的LeftNav.vue组件中编辑(增加)代码

    <el-submenu  index="idx" key="key">
      <template slot="title">
        <i class="el-icon-loading"></i>
        <span>VUEX使用</span>
      </template>
      <el-menu-item  index="/vuex/Vuex01" key="key01">
        <i class="el-icon-orange"></i>
        <span>VUEX01</span>
      </el-menu-item>
      <el-menu-item  index="/vuex/Vuex02" key="key02">
        <i class="el-icon-potato-strips"></i>
        <span>VUEX02</span>
      </el-menu-item>
    </el-submenu>

3. 模块

在项目中创建store目录分别维护state/actions/mutations/getters/store

state.js

export default {
  eduName: '默认值~~'
}

getters.js

export default {
  getEduName: (state) => {
    return state.eduName;
  }
}

mutations.js

export default {
  // type(事件类型)： 其值为setEduName
  // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器
  setEduName: (state, payload) => {
    state.eduName = payload.eduName;
  }
}

actions.js 暂时不写代码

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

4. 引用

在src中的main.js进行引用

//导入并使用store实例
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  data(){
    return{
      bus :new Vue()
    }
  },
  components: { App },
  template: '<App/>'
})

以下是取值操作 

在Vuex01.vue组件中编写代码

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>Vuex01</h1>
    <p>state中eduName的值为: </p>
    <!-- {{mag}} -->
    <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    <el-row style="margin-top: 20px;">
      <el-button type="primary" plain @click="hq">获取state</el-button>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    },
    methods: {
      hq() {
        let eduName = this.$store.state.eduName;
        alert(eduName);
      }
    }

  }
</script>

<style>
</style>

执行结果为 : 

三、改值

在Vuex01.vue组件中编写代码

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>Vuex01</h1>
    <p>state中eduName的值为: </p>
    <!-- {{mag}} -->
    <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    <el-row style="margin-top: 20px;">
      <el-button type="primary" plain @click="hq">获取state</el-button>
      <el-button type="primary" plain @click="xg">修改state</el-button>
    </el-row>
    <!-- {{mag}} -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    },
    methods: {
      hq() {
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      xg() {
        //type(事件类型)： 这里的值为setEduName，是指mutations.js中的setEduName事件
        this.$store.commit('setEduName', {
          eduName: this.mag
        });
        //修改完成给与提示
        this.$message({
          showClose: true,
          message: '成功修改eduName的值为 : ' + this.mag,
          type: 'success'
        });
      },
     
    }
  }
</script>

<style>
</style>

修改如图 :

四、异步&后台请求

在Vuex01.vue组件中编写所有代码

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>Vuex01</h1>
    <p>state中eduName的值为: </p>
    <!-- {{mag}} -->
    <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    <el-row style="margin-top: 20px;">
      <el-button type="primary" plain @click="hq">获取state</el-button>
      <el-button type="primary" plain @click="xg">修改state</el-button>
      <el-button type="primary" plain @click="xgAsync">异步修改state</el-button>
      <el-button type="primary" plain @click="xgAjax">后台请求</el-button>
    </el-row>
    <!-- {{mag}} -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    },
    methods: {
      hq() {
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      xg() {
        //type(事件类型)： 这里的值为setEduName，是指mutations.js中的setEduName事件
        this.$store.commit('setEduName', {
          eduName: this.mag
        });
        //修改完成给与提示
        this.$message({
          showClose: true,
          message: '成功修改eduName的值为 : ' + this.mag,
          type: 'success'
        });
      },
        xgAsync() {
          //type(事件类型)： 这里的值为setEduNameByAsync，是指actions.js中的setEduNameByAsync事件
          this.$store.dispatch('setEduNameByAsync', {
            eduName: this.mag
          });
          //修改完成给与提示
          this.$message({
            showClose: true,
            message: '7秒后将为把eduName值改为 : ' + this.mag,
            type: 'success'
          });
        },
        xgAjax() {
          //type(事件类型)： 这里的值为setEduNameByAjax，是指actions.js中的setEduNameByAjax事件
          this.$store.dispatch('setEduNameByAjax', {
            eduName: this.mag,
            _this:this
          });
          //修改完成给与提示
          this.$message({
            showClose: true,
            message: '7秒后将为把eduName值改为 : ' + this.mag,
            type: 'success'
          });
        }
    }
  }
</script>

<style>
</style>

在Vuex02.vue组件中编写所有代码

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>Vuex02</h1>
    {{eduName}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    },
    computed: {
      eduName() {
        return this.$store.state.eduName;
      }
    }
  }
</script>

<style>
</style>

在src的action.js中配置后台请求的地址

 'SYSTEM_VuexAjax': '/vuex/queryVuex', //Vuex的异步请求

在src的store模块中编写actions.js

 export default {
   setEduNameByAsync: function(context, payload) {
     setTimeout(() => {
       //这里的setEduName(事件类型)是指mutations.js中的setEduName事件
       context.commit('setEduName', payload);
     }, 7000);
     //7000是指7秒之后执行这个事件
   },
   setEduNameByAjax: function(context, payload) {
     
     let _this=payload._this;
     //定义后端都请求地址
     let url = _this.axios.urls.SYSTEM_VuexAjax;
     let params = {
       resturantName: payload.eduName
     }
     _this.axios.post(url, params).then(r => {
       console.log(r);
     }).catch(e => {
       console.log(e);
     });
   }
 }

异步效果如图:

后台请求效果如图:

带来的获取

学习 Vuex 中的改变值和异步操作带给我们以下收获：

1. 统一管理状态：Vuex 提供了一个集中式的状态管理模式，通过 mutations 来修改状态。这样可以确保状态的修改都经过 mutations，使得状态的变更更加可追踪和可维护。同时，由于状态被集中管理，我们可以更方便地在不同的组件中共享和访问状态。

2. 易于调试和追踪状态变化：由于状态的变更都经过 mutations，我们可以通过在 mutations 中添加一些调试信息，或者使用 Vuex 插件来记录状态的变化历史。这样可以更好地追踪和调试状态的变化，提高开发效率。

3. 异步操作的管理：在实际开发中，我们经常需要进行异步操作，例如发送网络请求或者定时任务。Vuex 提供了 actions 来处理异步操作，可以在 actions 中触发 mutations 来修改状态。通过 actions，我们可以更好地管理和组织异步操作，使得代码更加清晰和可维护。

4. 状态的可预测性：由于状态的变更只能通过 mutations 进行，而且 mutations 是同步的，这样可以保证状态的变更是可预测的。在开发过程中，我们可以清楚地知道哪些操作会修改状态，从而更好地理解应用的行为和状态的变化。

总而言之，学习 Vuex 中的改变值和异步操作可以带给我们更好的状态管理能力，提高代码的可维护性和可预测性，同时也方便了状态的调试和追踪。这些收获对于开发大型应用和团队协作非常有价值。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1078623.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Linux初阶】多线程1 | 页表的索引作用，线程基础（优缺点、异常、用途），线程VS进程，线程控制，C++多线程引入

【Linux初阶】多线程1 | 页表的索引作用，线程基础（优缺点、异常、用途），线程VS进程，线程控制，C++多线程引入

文章目录 ☀️一、深入理解页表☀️二、Linux线程概念&#x1f33b;1.什么是线程&#xff08;重点&#xff09;⚡&#xff08;1&#xff09;线程的概念⚡&#xff08;2&#xff09;线程库初识 &#x1f33b;2.线程的优点&#x1f33b;3.线程的缺点&#x1f33b;4.线程异常&…
阅读更多...
为什么设置静态代理IP后无法正常上网，怎么解决？

为什么设置静态代理IP后无法正常上网，怎么解决？

静态代理IP是一个固定的IP地址&#xff0c;因为其出色的稳定性和安全性而得到广泛应用&#xff0c;常用于一些对网络质量要求高、需要长期稳定和持续可靠连接的业务。设置静态代理IP后无法上网是用户常见的网络问题&#xff0c;通常有多种原因&#xff1a; 1. 静态代理IP不可用…
阅读更多...
【Flutter学习】AppBar

【Flutter学习】AppBar

App Bar 可以视为页面的标题栏&#xff0c;在 Flutter 中用AppBar组件实现。 一个简单的AppBar实现代码如下&#xff1a; import package:flutter/material.dart;void main() {runApp(const AppBarTest()); }class AppBarTest extends StatelessWidget {const AppBarTest({Key…
阅读更多...
【AGC】云托管新建站点时间过长的问题排查方法

【AGC】云托管新建站点时间过长的问题排查方法

【问题描述】 开发者按照指导文档使用云托管服务&#xff0c;已经申请了域名&#xff0c;在创建站点时页面显示证书配置最长需要12小时&#xff0c;然而&#xff0c;在等了两天后依然是激活中的状态&#xff0c;没有如期上线。 ​ 【解决方案】 卡在上线中的状态有以下几个原…
阅读更多...
F. Vasilije Loves Number Theory

F. Vasilije Loves Number Theory

Problem - F - Codeforces 思路&#xff1a;分析一下题意&#xff0c;对于第一种操作来说&#xff0c;每次乘以x&#xff0c;那么nn*x&#xff0c;然后问是否存在一个a使得gcd(n,a)1并且n*a的约数个数等于n&#xff0c;有最大公约数等于1我们能够知道其实这两个数是互质的&…
阅读更多...
圆满完成重保网络防护行动，持安科技获西南兵工致信感谢

圆满完成重保网络防护行动，持安科技获西南兵工致信感谢

近日&#xff0c;因积极协助西南兵工有限责任公司开展重保网络防护行动中&#xff0c;提供强大零信任网络安全产品和专业技术力量配合&#xff0c;持安科技收到了来自西南兵工有限责任公司的致信感谢。 持安为西南兵工提供的应用层零信任解决方案&#xff0c;是持安科充分吸取了…
阅读更多...
Hibiki Run 市场火爆，“Listen to Earn”赛道的现象级应用？

Hibiki Run 市场火爆，“Listen to Earn”赛道的现象级应用？

在 9 月 18 日&#xff0c;以“Listen to Earn”为特点的 Web3 数字音乐类项目 Hibiki Run&#xff0c;在包括 DAOStarter、Spores Network、BitMart 在内的 三个平台&#xff0c;开启了实用通证 $HUT 的 IDO / IEO 活动。据悉&#xff0c;在本轮认购开启后的短时间内所有平台均…
阅读更多...
Python 图形化界面基础篇：更改字体、颜色和样式

Python 图形化界面基础篇：更改字体、颜色和样式

Python 图形化界面基础篇&#xff1a;更改字体、颜色和样式 引言 Tkinter 库简介步骤1&#xff1a;导入 Tkinter 模块步骤2&#xff1a;创建 Tkinter 窗口步骤3&#xff1a;创建文本标签步骤4&#xff1a;更改字体步骤5&#xff1a;更改颜色步骤6&#xff1a;更改样式 完整示例…
阅读更多...
数字图像处理实验记录一（图像基本灰度变换）

数字图像处理实验记录一（图像基本灰度变换）

文章目录 基础知识图像是什么样的&#xff1f;1&#xff0c;空间分辨率&#xff0c;灰度分辨率2&#xff0c;灰度图和彩色图的区别3&#xff0c;什么是灰度直方图&#xff1f; 实验要求1&#xff0c;按照灰度变换曲线对图像进行灰度变换2&#xff0c;读入一幅图像&#xff0c;分…
阅读更多...
使用python查找指定文件夹下所有xml文件中带有指定字符的xml文件

使用python查找指定文件夹下所有xml文件中带有指定字符的xml文件

文件夹目录如下&#xff08;需要递归删除文件夹下的.DS_Store文件&#xff09;&#xff1a; labels文件夹下面是xml文件&#xff1a; import os import os.pathpath "name/labels" files os.listdir(path) # 得到文件夹下所有文件名称 s []for xmlFile in files:…
阅读更多...
成为领导心腹：新入行的测试人员，如何快速提升自己的影响力？

成为领导心腹：新入行的测试人员，如何快速提升自己的影响力？

作为一名新入行的测试人员&#xff0c;如何提高自己在工作中的影响力呢&#xff1f;可能有人会问了&#xff1a;“测试人员不是只要安分守己的做好自己的测试工作不就行了吗&#xff1f;又不是当管理者&#xff0c;为什么要提高影响力呢&#xff1f;”说实话&#xff0c;我刚入…
阅读更多...
“比特币震荡中的秘密信号？技术分析揭示最近走势的关键!“

“比特币震荡中的秘密信号？技术分析揭示最近走势的关键!“

技术分析 比特币维持在 27,000 美元的支撑位&#xff0c;甚至在此价格水平上形成了新的更高低点。这标志着一个非常有利的发展&#xff0c;表明每小时和每日时间框架上的看涨趋势。 然而&#xff0c;当考虑每周和每月的观点时&#xff0c;我们仍然遇到阻力&#xff0c;这可以…
阅读更多...
【开源系统开发框架】：一招高效实现办公流程化发展！

【开源系统开发框架】：一招高效实现办公流程化发展！

实现高效化办公是很多职场人的愿望。毕竟这能提高企业的办公效率&#xff0c;高效利用内部资源&#xff0c;创造顺畅无阻的流程化办公&#xff0c;因此也成为很多企业的追求。什么样的平台软件可以助力实现&#xff1f;低代码技术平台的优势多&#xff0c;轻量级、易操作、简单…
阅读更多...
陀螺仪传感器解读-Gyro Acce,1

陀螺仪传感器解读-Gyro Acce,1

加速度计和陀螺仪的简介 https://www.cnblogs.com/zdxgloomy/articles/4171937.html 加速度计和陀螺仪的使用指南 &#xff0c;代码部分 https://www.amobbs.com/forum.php?modviewthread&tid5510930&_dsign972b156c 模拟加速度计: 1. Accelerometer prinicple. 加…
阅读更多...
Python 图形化界面基础篇：将应用程序打包为可执行文件

Python 图形化界面基础篇：将应用程序打包为可执行文件

Python 图形化界面基础篇&#xff1a;将应用程序打包为可执行文件 引言 PyInstaller 简介步骤1&#xff1a;安装 PyInstaller 步骤2&#xff1a;创建 Python GUI 应用程序步骤3&#xff1a;使用 PyInstaller 打包应用程序 完整示例代码解释结论 引言 在开发完一个图形用户界面…
阅读更多...
Docker 基础

Docker 基础

一、快速入门&#xff1a; 1.Docker的安装 安装docker引擎 官方网址&#xff1a;Install Docker Engine on CentOS | Docker Docs 朋友们&#xff0c;有坑&#xff0c;千万不要用官方的仓库&#xff0c;就是下面这一步 记得用国内的镜像源&#xff1a; yum-config-manager …
阅读更多...
Sectigo有便宜的泛域名SSL证书吗

Sectigo有便宜的泛域名SSL证书吗

Sectigo是国际性的CA认证机构&#xff0c;在多个国家设有分支机构和办事处&#xff0c;为了提高SSL证书的审核速度&#xff0c;Sectigo成立了亚太审核中心&#xff0c;快速审核国内的SSL证书申请&#xff0c;为客户提供全方位的数字证书和网络安全解决方案。Sectigo的使命是通过…
阅读更多...
纸巾餐盒经营配送小程序商城的作用是什么

纸巾餐盒经营配送小程序商城的作用是什么

对餐饮行业来说&#xff0c;纸巾餐盒消耗非常快&#xff0c;需求比较旺盛&#xff0c;对普通家庭/食堂来讲也有较高的需求&#xff0c;可以说是必需品。也因此&#xff0c;市场中纸巾餐盒厂家及经销商不少&#xff1a; 1、拓客难、品牌传播难 纸巾餐盒可以零售也可以批发&…
阅读更多...
linux安装java环境(jdk安装，java安装，通过安装包方式)

linux安装java环境(jdk安装，java安装，通过安装包方式)

1&#xff1a;官网下载jdk-8u381-linux-x64.tar.gz安装包https://www.oracle.com/java/technologies/downloads/#java8 2&#xff1a;复制安装包到/opt目录下&#xff0c;使用命令解压安装包 tar -xvf jdk-8u341-linux-x64.tar.gz3&#xff1a;要在 /usr 目录下创建一个软链接…
阅读更多...
@MultipartConfig注解

@MultipartConfig注解

前言&#xff1a; 在学习Javaweb的Servlet文件上传和下载的过程中&#xff0c;我们会遇到一个特殊的注解---MultipartConfig。 MultipartConfig的适用情况&#xff1a; 1.文件上传: 当您的应用程序需要接收用户上传的文件时&#xff0c;可以在相应的 Servlet 上使用 Multipart…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023