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

2023-10-16 06:45
文章标签 基础 使用 异步 vuex 存值

本文主要是介绍关于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>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);});}}

异步效果图:

 后台效果图:

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

这篇关于关于Vuex的基础使用存值及异步的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/219758

相关文章

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念