当前位置：首页 > news >正文

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

news 2025/7/18 18:32:08

引言

在现代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>

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>

配置路由

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

建包store以及五个js文件
在这里插入图片描述
state.js

export default{eduName:'唱歌会跑调Y'
}

mutations.js

export default{setEduName:(state,payload)=>{state.eduName = payload.eduName}
}

getters.js

export default{getEduName:(state)=>{return state.eduName;}
}

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

配置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/>'
})

这样获取和改变就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>

actions.js

export default{setEduNameAsync:(context,payload)=>{setTimeout(function(){context.commit('setEduName',payload)},15000)},setEduNameAjax:(context,payload)=>{let _this = payload._thislet url = _this.axios.urls.Vuex_Ajax;let params = {resturantName: payload.eduName}_this.axios.post(url, params).then(r => {console.log(r)}).catch(e => {})}
}

同步用commit，异步用dispatch,期间主页this的局限,在actions.js调用不到全局this的实例，需要用传参代替，将参数带过去，才能发送Ajax请求.
另外，注意http发送请求超时时间，一般设置为10秒，超过10秒及超时，则不会相应数据，在用deBug的情况下经常会出现数据相应不到的情况，需注意！！！
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间