Vuex使用方式及异步问题处理

news2024/11/15 7:18:57

                                                  🎬 艳艳耶✌️：个人主页

                                                  🔥 个人专栏 ：《Spring与Mybatis集成整合》《Vue.js使用》

                                                   ⛺️ 生活的理想，为了不断更新自己 ! 

目录

1.Vuex简介：

2.vuex获取值

2.1安装

2.2.菜单栏

2.3.模块

2.4使用

3.改值

4.Vuex的异步加载问题处理

1.Vuex简介：

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

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

Vuex 的核心概念包括：

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

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

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

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

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

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

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

2.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>页面一</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>页面二</h1>
    {{mag}}
  </div>
</template>

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

<style>
</style>

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

mport page1 from '@/views/vuex/page1'
import page2 from '@/views/vuex/page2'

{
      path: '/vuex/page1',
      name: 'page1',
      component: page1
    },{
      path: '/vuex/page2',
      name: 'page2`',
      component: page2
    },

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

<el-submenu index="idx_999" key="idx_999">
      <template slot="title">
        <span>vuex管理</span>
      </template>
      <el-menu-item index="/vuex/page1" key="idx_99901">
        <span>页面一</span>
      </el-menu-item>

      <el-menu-item index="/vuex/page2" key="idx_99902">
        <span>页面二</span>
      </el-menu-item>
    </el-submenu>

2.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

2.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>页面一</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>

效果展示：

3.改值

在page1.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>

效果图： 

4.Vuex的异步加载问题处理

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

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>页面一</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: '8秒后将为把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: '后台请求传的eduName值为 : ' + this.mag,
            type: 'success'
          });
        }
    }
  }
</script>

<style>
</style>

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

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>页面二</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);
     });
   }
 }

效果展现：

效果展现：

后台结果：

 

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

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

相关文章

水声功率放大器的应用场景有哪些

水声功率放大器的应用场景有哪些

水声功率放大器是一种特殊的放大器&#xff0c;它专门用于放大水声信号&#xff0c;广泛应用于水声通信、水声传感、声纳等领域。下面将详细介绍水声功率放大器的应用场景及其重要性。 水声通信是水声功率放大器最常见的应用场景之一。水声通信是利用水作为传输介质进行通信的一…
阅读更多...
JavaScript Web APIs第四天笔记

JavaScript Web APIs第四天笔记

Web APIs - 第4天 进一步学习 DOM 相关知识&#xff0c;实现可交互的网页特效 能够插入、删除和替换元素节点能够依据元素节点关系查找节点 日期对象 掌握 Date 日期对象的使用&#xff0c;动态获取当前计算机的时间。 ECMAScript 中内置了获取系统时间的对象 Date&#xff…
阅读更多...
Restclient-cpp库介绍和实际应用：爬取www.sohu.com

Restclient-cpp库介绍和实际应用：爬取www.sohu.com

概述 Restclient-cpp是一个用C编写的简单而优雅的RESTful客户端库&#xff0c;它可以方便地发送HTTP请求和处理响应。它基于libcurl和jsoncpp&#xff0c;支持GET, POST, PUT, PATCH, DELETE, HEAD等方法&#xff0c;以及自定义HTTP头部&#xff0c;超时设置&#xff0c;代理服…
阅读更多...
Python 人工智能 Machine Learning 机器学习基础知识点详细教程（更新中）

Python 人工智能 Machine Learning 机器学习基础知识点详细教程（更新中）

人工智能基本介绍 人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。它试图了解智能的实质&#xff0c;并生产出一种新的能以人类智能相似的方式做出反应的智…
阅读更多...
echart双柱状图

echart双柱状图

1.效果 2.代码 const option {baseOption: {// backgroundColor: #0e2147,timeline: {show: false,},color: [#f14f75, #2c7efa],title: {text: 自动派单使用情况分析,textStyle: {rich: {a: {fontSize: 16,fontWeight: 600,},},},subtext: "2023~2024",top: 3%,l…
阅读更多...
redis 哨兵 sentinel(一)配置

redis 哨兵 sentinel(一)配置

sentinel巡查监控后台master主机是否故障&#xff0c;如果故障根据投票数自动将某一个从库转换为新主库&#xff0c;继续对外服务 sentinel 哨兵的功能 监控 监控主从redis库运行是否正常消息通知 哨兵可以将故障转移的结果发送给客户端故障转移 如果master异常&#xff0c;则…
阅读更多...
传奇XO引擎架设教程

传奇XO引擎架设教程

本教程只限于技术研究使用&#xff0c;请勿用于商业用途。 本站教程、资源皆在单机环境进行&#xff0c;仅供单机研究学习使用&#xff0c;下载后请于24小时内删除&#xff0c;或购买正版。 XO三端引擎架设教程 演示系统&#xff1a;Windows Server2012 演示地址&#xff1a;…
阅读更多...
Day 4 C++

Day 4 C++

算术运算符重载 种类&#xff1a; - * / % #include <iostream>using namespace std;class Cacu {friend const Cacu operator(const Cacu &l,const Cacu &r);friend const Cacu operator-(const Cacu &l,const Cacu &r);friend const Cacu operator*…
阅读更多...
这可是全网最全的华为认证零基础学习路线整理，最新版分享

这可是全网最全的华为认证零基础学习路线整理，最新版分享

网络工程师愈发重要的新时代&#xff0c;华为认证已经成为学习网工的重中之重。 全球企业数字化转型呈现从慢速试点到今天的倍增创新&#xff0c;技术应用从单一孤立的到各类技术的融合&#xff0c;网络作为企业数字化运营的基石&#xff0c;迎来联接和数据的爆炸式增长&#x…
阅读更多...
归并排序 nO(lgn)

归并排序 nO(lgn)

大家好&#xff0c;我是蓝胖子&#xff0c;我一直相信编程是一门实践性的技术&#xff0c;其中算法也不例外&#xff0c;初学者可能往往对它可望而不可及&#xff0c;觉得很难&#xff0c;学了又忘&#xff0c;忘其实是由于没有真正搞懂算法的应用场景&#xff0c;所以我准备出…
阅读更多...
【竞赛题目】木块（C语言详解）

【竞赛题目】木块（C语言详解）

" 木块 " 是【第二届全国高校计算机技能竞赛】里的一道竞赛题目&#xff0c;博主觉得很新颖想推荐给大家&#xff1b; 题目描述 为了提高词汇量&#xff0c;小理得到了一套四块木块&#xff0c;其中每块都是一个立方体&#xff0c;六面各写着一个字母。他正在通过将…
阅读更多...
SQL利用Case When Then多条件判断

SQL利用Case When Then多条件判断

CASE WHEN 条件1 THEN 结果1 WHEN 条件2 THEN 结果2 WHEN 条件3 THEN 结果3 WHEN 条件4 THEN 结果4 ......... WHEN 条件N THEN 结果N ELSE 结果X END Case具有两种格式。简单Case函数和Case搜索函数。 --简单Case函数 CASE sex WHEN 1 THEN…
阅读更多...
MyBatis-Plus为简化开发而生

MyBatis-Plus为简化开发而生

简介 MyBatis-Plus 简称 MP是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 他们的愿景是成为 MyBatis 最好的搭档&#xff0c;就像魂斗罗中的 1P、2P&#xff0c;基友搭配&#xff0c;效率翻倍。 特性 无…
阅读更多...
JWT 使用入门（一）配置与示例

JWT 使用入门（一）配置与示例

文章目录 1、用途✨2、实现流程&#x1f440;3、JWT介绍3.1、构成3.1.1、header3.1.2、载荷3.1.3、签证 4、java实现4.1、引入依赖4.2、测试案例 官网链接&#xff1a;https://github.com/jwtk/jjwt 1、用途✨ JWT主要作用分为以下两种&#xff1a; 1&#xff1a;作为在前后端…
阅读更多...
css修改滚动条

css修改滚动条

系统默认的滚动条可能不是很美观&#xff0c;有时候我们想要自己进行样式的修改&#xff0c;就可以用到下面的方法 设置滚动条的属性为overflow&#xff0c;取值是x轴和y轴 如果想单独设置某个轴&#xff0c;可以使用overflow-x,overflow-y <!DOCTYPE html> <html …
阅读更多...
测试老鸟整理，Pytest自动化测试框架的一些关键点，一文贯通...

测试老鸟整理，Pytest自动化测试框架的一些关键点，一文贯通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Pytest自动化框架&…
阅读更多...
Python自动查重之原理、方法与实践详解

Python自动查重之原理、方法与实践详解

什么是自动查重&#xff1f; 自动查重是指使用计算机程序来比较两个或多个文件的内容&#xff0c;判断它们之间是否存在相似或相同的部分&#xff0c;从而检测出抄袭或重复的情况。自动查重可以用于学术论文、代码、文本等各种类型的文件&#xff0c;帮助提高原创性和质量。 为…
阅读更多...
kepler.gl 笔记：Layer

kepler.gl 笔记：Layer

Point S2Layer Icon Line Cluster Polygon 一个路径型的GeoJSON图层可以显示诸如行程路线或等值线的数据。轮廓的颜色可以使用数值字段进行设置。 一个多边形型的GeoJSON图层本质上是一种区域填充图层&#xff0c;最适合用于呈现地理围栏。填充颜色或高度可以使用数值字…
阅读更多...
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Toggle

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Toggle

组件提供勾选框样式、状态按钮样式及开关样式。该组件从API Version 8开始支持。 仅当ToggleType为Button时可包含子组件。 一、接口 Toggle(options: { type: ToggleType, isOn?: boolean }) 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使用。 参数: Toggle…
阅读更多...
Mac M1安装MongoDB6、后台运行

Mac M1安装MongoDB6、后台运行

MongoDB&#xff0c;版本6.02 记录两种使用MongoDB的方法&#xff0c;安装包和docker docker mongo&#xff1a;Mac M1运行、连接 Docker MongoDB7。导出、恢复数据库 一、安装包&#xff0c;以mac M1为例 1、下载对应平台的安装包 M1选择ARM版本 https://www.mongodb.com/t…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023