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

“高级Vue状态管理 - Vuex的魅力与应用“

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

引言

在现代Web开发中，前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加，有效地管理应用的状态成为了一项重要任务。Vue.js作为一种流行的JavaScript框架，提供了Vuex这个强大的状态管理库，旨在解决这个问题。本文将深入探讨Vuex的核心概念和特点，并通过实际案例展示如何使用Vuex进行数据获取、值变更和异步请求。

1. Vuex的简介

1.1 什么是Vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性和可预测性。Vuex的设计灵感来自于Flux和Redux，但针对Vue.js的特点进行了优化和扩展。

1.2 Vuex的核心概念

在使用Vuex之前，我们需要了解其核心概念：

  • State：即应用的状态，保存在一个单一的JavaScript对象中。通过this.$store.state可以访问状态。
  • Mutation：用于变更状态的方法，每个mutation都有一个字符串的事件类型和一个回调函数。通过commit方法触发mutation。
  • Getter：类似于组件中的计算属性，用于从state中派生出一些状态。通过this.$store.getters可以访问getter。
  • Action：用于处理异步操作或批量提交mutation的方法。通过dispatch方法触发action。

2. Vuex的值获取与改变(综合案例)

首先，需要两个页面

page1

<template>
    <div>
      <h1>page1</h1>
      <p>改变state的值</p>
      请输入:<input v-model="msg"/>
      <button @click="fun1">获取state</button>
      <button @click="fun2">改变state</button>
    </div>
</template>
<script>
  export default{
    data(){
      return {
        msg:'mrz'
      }
    },methods:{
      fun1(){
        alert(this.$store.state.eduName)
      },fun2(){
        this.$store.commit('setEduName',{
            eduName:this.msg
        })
      }
    }
  }
</script>
<style>
</style>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

page2

<template>
    <div><h1>page2</h1>
    {{eduName}}
    </div>
</template>
<script>
  export default{
    data(){
      return {
        msg:'mrz'
      }
    },computed:{
      eduName(){
        return this.$store.getters.getEduName;
      }
    }
  }
</script>
<style>
</style>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'
import page1 from '@/views/vuex/page1'
import page2 from '@/views/vuex/page2'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Register',
      component: Register
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: 'LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: 'TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/book/AddBook',
          name: 'AddBook',
          component: AddBook
        },
        {
          path: '/book/BookList',
          name: 'BookList',
          component: BookList
        },
        {
          path: '/vuex/page1',
          name: 'page1',
          component: page1
        },
        {
          path: '/vuex/page2',
          name: 'page2',
          component: page2
        }
      ]
    }
  ]
})
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69

建包store以及五个js文件

state.js

export default{
  eduName:'唱歌会跑调Y'
}
• 1
• 2
• 3
• 4

mutations.js

export default{
  setEduName:(state,payload)=>{
    state.eduName = payload.eduName
  }
}
• 1
• 2
• 3
• 4
• 5
• 6
• 7

getters.js

export default{
  getEduName:(state)=>{
    return state.eduName;
  }
}
• 1
• 2
• 3
• 4
• 5
• 6

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
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

配置main.js(import store from ‘./store’)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
// process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store'
// 新添加3
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
import axios from '@/api/http'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
new Vue({
  el: '#app',
  router,
  store,
  data(){
    return{
      Bus:new Vue()
    }
  },
  components: { App },
  template: '<App/>'
})
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
  • 这样获取和改变就OK了，看看效果

    点击改变

    page2的值发生改变

3. Vuex的异步请求

3.1 异步请求的必要性

在现代Web应用中，我们经常需要进行异步操作，如获取后端数据、发送网络请求等。Vuex提供了一种机制来处理这种场景，并保证状态的一致性。

3.2 使用Actions进行异步操作

在Vuex中，我们可以定义actions来进行异步操作。以下是一些使用actions的示例：

page1

<template>
  <div>
    <h1>page1</h1>
    <p>改变state的值</p>
    请输入:<input v-model="msg" />
    <button @click="fun1">获取state</button>
    <button @click="fun2">改变state</button>
    <button @click="fun3">改变state</button>
    <button @click="fun4">请求后台</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'mrz'
      }
    },
    methods: {
      fun1() {
        alert(this.$store.state.eduName)
      },
      fun2() {
        this.$store.commit('setEduName', {
          eduName: this.msg
        })
      },
      fun3() {
        this.$store.dispatch('setEduNameAsync', {
          eduName: this.msg
        })
      },
      fun4() {
        this.$store.dispatch('setEduNameAjax', {
          eduName: this.msg,
          _this:this
        })
      }
    }
  }
</script>
<style>
</style>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46

actions.js

export default{
  setEduNameAsync:(context,payload)=>{
    setTimeout(function(){
      context.commit('setEduName',payload)
    },15000)
  },
  setEduNameAjax:(context,payload)=>{
    let _this = payload._this
    let url = _this.axios.urls.Vuex_Ajax;
    let params = {
      resturantName: payload.eduName
    }
    _this.axios.post(url, params).then(r => {
      console.log(r)
    }).catch(e => {
    })
  }
}
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
  • 同步用commit，异步用dispatch,期间主页this的局限,在actions.js调用不到全局this的实例，需要用传参代替，将参数带过去，才能发送Ajax请求.
  • 另外，注意http发送请求超时时间，一般设置为10秒，超过10秒及超时，则不会相应数据，在用deBug的情况下经常会出现数据相应不到的情况，需注意！！！
    // axios默认配置
    axios.defaults.timeout = 10000; // 超时时间

总结

本文深入介绍了Vuex的核心概念和特点，并通过三个大目录展示了在实际应用中如何使用Vuex进行状态管理。我们学习了如何获取和改变Vuex中的值，以及如何处理异步请求。Vuex作为Vue.js生态系统中的重要组成部分，在复杂应用开发中扮演着关键的角色。希望本文对于理解和应用Vuex有所帮助。


文章标签：
JavaScript
前端开发
存储
关键词：
vue应用VUE.js
VUE.js应用
vue vuex VUE.js
vuex VUE.js
vue状态管理vuex VUE.js
i46usca74mzt4
目录
相关文章
34789737
|
4月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
404 2
哇塞女孩
|
3月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
361 137
谢妹纸
|
7月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
892 0
34789737
|
5月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些？
虚拟列表在 Vue3 中通过仅渲染可视区域内容，显著提升大数据列表性能，适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景，结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
34789737
563 1
rvblio6ca4cug
|
6月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
525 1
34789737
|
6月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
341 0
小宋1021
|
9月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
1169 4
我们是幸福一家人
|
7月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
393 82
34789737
|
8月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
1096 78
游客tsrksm3mlhq4y
|
9月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
游客tsrksm3mlhq4y
387 57

热门文章

最新文章

  • 1
    SpringCloud微服务实战——搭建企业级开发框架（四十一）：扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
  • 2
    使用Vue3+TS重构百星websocket插件（下）
  • 3
    Vue.js的webpack.config.js示例
  • 4
    vue3.0 vite引入SVG iconfont
  • 5
    Vue(Vue2+Vue3)——2.使用VsCode搭建Vue开发环境
  • 6
    Vue ElementUI table给表格一个斜线分隔线
  • 7
    Spring Boot 与 Vue.js 前后端分离中的数据交互机制
  • 8
    vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
  • 9
    vue移动端复杂表格表头，固定表头与固定第一列
  • 10
    Vue.js Class与Style绑定
  • 1
    Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
    892
  • 2
    用组件懒加载优化Vue应用性能
    393
  • 3
    Vue 表情包输入组件实现代码及详细开发流程解析
    358
  • 4
    Vue 自定义进度条组件封装及使用方法详解
    532
  • 5
    如何高效实现 vue 文件批量下载及相关操作技巧
    697
  • 6
    Vue 项目中如何自定义实用的进度条组件
    335
  • 7
    Vue框架中常见指令的应用概述。
    148
  • 8
    Vue 文件批量下载组件封装完整使用方法及优化方案解析
    642
  • 9
    Vue 表情包输入组件的实现代码：支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
    609
  • 10
    Vue 手风琴实现的三种常用方式及长尾关键词解析
    412

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    基于JAVA的高校宿舍管理系统的设计与实现(论文+源码)_kaic