AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2023-11-08 288
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vuex使用方式及异步问题处理

                                                 🎬 艳艳耶✌️：个人主页

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

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


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);
     });
   }
 }

效果展现：

效果展现：

后台结果：

文章标签：
JavaScript
Java
存储
Spring
数据库连接
艳艳耶
目录
相关文章
游客j52fhnena2r3e
|
存储 弹性计算 网络安全
阿里云对象存储OSS存放视频及费用说明（存储费+流量费）
对象存储OSS存放视频及播放费用说明
游客j52fhnena2r3e
2739 0
李杉杉
|
Unix Linux 程序员
Linux必知词汇：GNU通用公共许可证 GPL（GNU General Public License）
Linux必知词汇：GNU通用公共许可证 GPL（GNU General Public License）
李杉杉
3657 0
蓝易云
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点，希望对你有所帮助。在选择使用哪一个框架时，需要根据项目的具体需求和团队的技术栈来决定。
蓝易云
820 83
北京木奇移动技术
|
8月前
|
人工智能 机器人 vr&ar
AI 技术在英语口语的应用
AI赋能英语口语学习，迈向沉浸式交互新时代。2026年，AI实现多模态对话、音素级纠音、情绪识别与情境自适应，数字人老师实时模拟真实交流场景，结合AR实现“边用边学”。通过高频短时练习，助力用户自然输出地道表达，全面提升口语能力。#AI技术 #AI应用
北京木奇移动技术
421 0
游客lijmi4663rgsa
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法：原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作，还具有性能上的独特优势：返回的引用能够直接影响原数组的数据内容，使得数据更新更加高效。通过各种场景的展示，我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中，掌握 Array.find() 的特性和使用技巧，可以让代码更加简洁高效，特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一
游客lijmi4663rgsa
901 1
阿里云
|
10月前
|
人工智能 弹性计算 自然语言处理
史上首次！万卡AI集群支撑双11，通义千问大规模落地
2025年双11，阿里云提供超千万核ECS算力及万卡灵骏智算集群，支撑淘宝推荐等核心业务性能提升超30%。通义千问大模型大规模落地，Qwen-MT单日调用超14亿次，助力商品出海、客服与经营分析，全面赋能双11智能化升级。
阿里云
1366 0
史上首次！万卡AI集群支撑双11，通义千问大规模落地
G0518
|
监控 持续交付 API
深入理解云计算中的微服务架构：原理、优势与实践
深入理解云计算中的微服务架构：原理、优势与实践
G0518
838 83
Jack20
|
网络协议 安全 数据可视化
路由与交换系列之防火墙入门
几分钟带你快速开“玩”防火墙
Jack20
1031 1
阿里云云原生
|
自然语言处理 Kubernetes Cloud Native
Dapr 在阿里云原生的实践
Faas 场景下，比较吸引用户的是成本和研发效率，成本主要通过按需分配和极致的弹性效率来达成。而应用开发者期望通过 FaaS 提供多语言的编程环境，提升研发效率，包括启动时间、发布时间、开发的效率。 ​
阿里云云原生
4897 2

热门文章

最新文章

  • 1
    油猴（tampermonkey）离线安装包下载，油猴插件离线版下载
  • 2
    《走进git时代系列三》详解部分git思想及SVN/GIT命令对比解析
  • 3
    通用文本向量模型全新升级至V3，开通百炼速来体验~~
  • 4
    npm install安装时一直idealTree:npm: sill idealTree buildDeps解决方案（亲测有效）
  • 5
    推荐3款 Docker 认证的实用免费插件，帮助您快速构建云原生应用程序！
  • 6
    ivx低代码开发平台
  • 7
    强大的mock数据生成工具--apipost
  • 8
    [20170629]带过滤的复制项UI操作导致订阅全部初始化问题
  • 9
    浅谈 Active Learning
  • 10
    75佳带给你灵感的 CSS 网页设计作品（系列三）
  • 1
    PHP clone 之后，为什么改副本会影响原对象？
    42
  • 2
    阿里云Tokens免费额度剩余在哪查询？百炼免费Token用完之后会扣费吗？
    27
  • 3
    PISTON 2018-2019 自主平台海洋数据集
    29
  • 4
    2026测试Skill大爆发：从“会写脚本”到“会设计智能体”
    78
  • 5
    Cursor + Skill：10分钟从零生成可评审测试用例（附完整步骤）
    34
  • 6
    2027 校招项目：做一条可回放的 AI 测试链路
    27
  • 7
    被引用不等于被吸收：解码国内生成式AI引用生态的真实信号
    38
  • 8
    从指标到洞见：GEO实证研究中的方法建构与应用指南
    26
  • 9
    【Azure Redis】Redis 指标 ClockSkewSeconds 解读：含义、读数与时钟偏差的影响
    39

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！