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

news2024/11/19 4:33:10

目录

一.概述

二.取值

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>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    }
  }
</script>
 
<style>
</style>

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

import 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" 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>

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>page1</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>

效果图：

 

三.改值

在page1.vue组件中编写代码

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page1</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>

效果图：

四.异步&后台请求

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

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page1</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>

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

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page2</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/1081871.html

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

相关文章

kafka详解(三)

kafka详解(三)

2.2 Kafka命令行操作 2.2.1 主题命令行操作 1&#xff09;查看操作主题命令参数 [aahadoop102 kafka]$ bin/kafka-topics.sh2&#xff09;查看当前服务器中的所有topic (配置了环境变量不需要写bin/) [aahadoop102 kafka]$ bin/kafka-topics.sh --bootstrap-server hadoop10…
阅读更多...
vue3组件的通信方式

vue3组件的通信方式

一、vue3组件通信方式 通信仓库地址:vue3_communication: 当前仓库为贾成豪老师使用组件通信案例 不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。 比如:vue2组件通信方式 props:可以实现父子组件、子父组件、甚至兄弟组件通信 自定义事件:可…
阅读更多...
【visionOS】从零开始创建第一个visionOS程序

【visionOS】从零开始创建第一个visionOS程序

前言&#xff1a;本來是看BonjourWeb的&#xff0c;但不自觉被apple visionOS吸引&#xff0c;因为这个概念的产品真的太前沿新颖了。 说不定到时候我会冲一冲~~~先简单学习下嘿嘿 为Apple Vision Pro创建一个新的应用程序和游戏世界。 介绍visionOS visionOS是苹果Vision Pr…
阅读更多...
Linux基本指令（1）

Linux基本指令（1）

Linux基本指令&#xff08;1&#xff09; 1.ls指令1.1ls的用法 2. pwd指令3.cd指令3.1 cd3.2补充内容3.3 cd - 指令3.4 cd ~ 指令 4. touch指令4.1stat指令 5.mkdir 指令6.rmdir/rm指令6.1补充内容 7.man指令8.nano 指令9.cat指令10 cp指令11 mv指令12 echo指令12.1 > 输出重…
阅读更多...
二叉搜索树--验证二叉搜索树

二叉搜索树--验证二叉搜索树

验证二叉搜索树-力扣 98 题 解题思路&#xff1a;利用二叉树中序遍历的特性&#xff1a;遍历出来的结果是升序的即符合二叉搜索树 对于二叉树中序遍历不是太理解的&#xff0c;作者推荐的小白书&#xff1a;二叉树的初步认识_加瓦不加班的博客-CSDN博客 中序非递归实现 // 解…
阅读更多...
抖音小店创业攻略，快速了解这些适合新手经营的类目

抖音小店创业攻略，快速了解这些适合新手经营的类目

抖音小店是抖音平台上的一种新型电商形态&#xff0c;它允许用户在抖音上开设自己的小店&#xff0c;销售自己的商品。抖音小店的开设门槛低&#xff0c;成本也不高&#xff0c;因此很受新手创业者的青睐。那么&#xff0c;下面不若与众将介绍抖音小店中有哪些适合新手创业者经…
阅读更多...
卫星影像-航拍影像-数据叠加到AutoCAD

卫星影像-航拍影像-数据叠加到AutoCAD

卫星影像-航拍影像-数据叠加到AutoCAD 发布时间&#xff1a;2018-01-17 版权&#xff1a; 同步视频教程&#xff1a;卫星地图_高清卫星地图_卫星地图视频_卫星图像应用到AutoCAD工程设计&#xff08;套合、叠加、配准&#xff09; 视频教程&#xff1a;如何选择中央子午线或者…
阅读更多...
.NET 8 中的调试增强功能

.NET 8 中的调试增强功能

作者&#xff1a;James Newton-King 排版&#xff1a;Alan Wang 开发人员喜欢 .NET 强大且用户友好的调试体验。您可以在您选择的 IDE 中设置断点&#xff0c;启动已经附加上调试器的程序&#xff0c;逐步执行代码并查看 .NET 应用程序的状态。 在 .NET 8 中&#xff0c;我们致…
阅读更多...
cdsn目录处理：```，```# 目录校正

cdsn目录处理：```，```# 目录校正

原标题 <small> cdsn目录处理&#xff1a; &#xff0c;中间添加 # 空格 空行后 遇到的底部空行出错&#xff0c;书接上回&#xff0c;处理空行【python查找替换&#xff1a;查找空行&#xff0c;空行前后添加&#xff0c;中间添加 # 空格 空行后遇到的第1行文字&am…
阅读更多...
React 组件传 children 的各种方案

React 组件传 children 的各种方案

自定义组件的时候往往需要传 children&#xff0c;由于写法比较多样&#xff0c;我就总结了一下。 方案列表 1. 类组件1.1 类组件&#xff0c;不使用解构1.2 类组件&#xff0c;使用解构 2. 函数组件2.1 函数组件&#xff0c;不使用解构2.2 函数组件&#xff0c;外部解构2.3 函…
阅读更多...
根据前序遍历结果构造二叉搜索树

根据前序遍历结果构造二叉搜索树

根据前序遍历结果构造二叉搜索树-力扣 1008 题 题目说明&#xff1a; 1.preorder 长度>1 2.preorder 没有重复值 直接插入 解题思路&#xff1a; 数组索引[0]的位置为根节点&#xff0c;与根节点开始比较&#xff0c;比根节点小的就往左边插&#xff0c;比根节点大的就往右…
阅读更多...
WPF 窗口白屏问题分析与初步解决

WPF 窗口白屏问题分析与初步解决

环境描述 开发环境&#xff1a; Windows 11 Visual Studio 2022 .NET Framework 4.8 目标电脑环境 Windows10 默认包含了 .NET Framework 4.8 现象 编译好的WPF应用程序&#xff0c;是基于 .NET Framework 4.8开发的&#xff0c;在大部分电脑上可以正常使用。在某个客…
阅读更多...
Python算法练习 10.11

Python算法练习 10.11

leetcode 394 字符串解码 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。 编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。 你可以认为输入字符串总是有效的&#xff1b;输入字符串中没…
阅读更多...
湖南首个，万应低代码软件技术专业校企共建基地落成！

湖南首个，万应低代码软件技术专业校企共建基地落成！

导语 9月开学季&#xff0c;湖南省民族职业学院教育技术学院迎来了近5000名新生&#xff0c;而其中软件技术专业的205名新生尤为引人注目——他们是这个校企共建专业的第一批学生&#xff0c;也是学院软件技术专业新型校企合作的第一批受益者。 湖南首个 万应低代码软件技术…
阅读更多...
10_11C++

10_11C++

思维导图 #include <iostream>using namespace std; class Person { private:string name; protected:int age; public:char sex; public:Person() {cout << "父类无参构造函数" << endl;}Person(string n,int a,char s):name(n),age(a),sex(s){co…
阅读更多...
[译]Sentry：如何从数据存储中获得更强的一致性

[译]Sentry：如何从数据存储中获得更强的一致性

翻译自&#xff1a;How to Get Stronger Consistency Out of a Datastore 地址&#xff1a;https://blog.sentry.io/2019/09/17/how-to-get-stronger-consistency-out-of-a-datastore Sentry的首要工作是接收、解析用户的异常信息。当用户异常信息大量上报时&#xff0c;Sentry…
阅读更多...
Linux部署kubeedge 1.4

Linux部署kubeedge 1.4

文章目录 一、机器信息二、环境准备&#xff08;所有节点操作&#xff09;2.1. 修改主机名2.2. 开启路由转发2.3.安装Docker&#xff08;所有节点&#xff09;2.4.部署K8S集群(单机版&#xff0c;云端节点) 2.5.安装Mosquitto&#xff08;只在边缘节点安装)三、安装kubeedge 1.…
阅读更多...
数据库基础篇二

数据库基础篇二

函数 约束 概述 概念&#xff1a;约束是作用于表字段上的规则&#xff0c;用于限制存储在表中的数据。目的&#xff1a;保证数据库中数据的正确、有效性和完整性。分类&#xff1a; 外键约束 外键用来让两张表的数据之间建立连接&#xff0c;从而保证数据的一致性和完整性…
阅读更多...
2023全国大学生软件测试大赛开发者测试练习题满分答案（PairingHeap2023）

2023全国大学生软件测试大赛开发者测试练习题满分答案（PairingHeap2023）

2023全国大学生软件测试大赛开发者测试练习题满分答案&#xff08;PairingHeap2023&#xff09; 题目详情题解代码&#xff08;直接全部复制到test类中即可&#xff09; 提示&#xff1a;该题只需要分支覆盖得分即可&#xff0c;不需要变异得分 题目详情 题解代码&#xff08;…
阅读更多...
Kubernetes使用OkHttp客户端进行网络负载均衡

Kubernetes使用OkHttp客户端进行网络负载均衡

在一次内部Java服务审计中&#xff0c;我们发现一些请求没有在Kubernetes&#xff08;K8s&#xff09;网络上正确地实现负载均衡。导致我们深入研究的问题是HTTP 5xx错误率的急剧上升&#xff0c;由于CPU使用率非常高&#xff0c;垃圾收集事件的数量很多以及超时&#xff0c;但…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023