教育网站 怎么做吸引人,seo怎么判断网站的好坏,如何制作电脑公司网站,西安市住房和城乡建设局官网目录 引言1. Vuex的简介1.1 什么是Vuex#xff1f;1.2 Vuex的核心概念 2. Vuex的值获取与改变(综合案例)3. Vuex的异步请求总结 引言
在现代Web开发中#xff0c;前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加#xff0c;有效地管理应用的状态成为了一项… 目录 引言1. Vuex的简介1.1 什么是Vuex1.2 Vuex的核心概念 2. Vuex的值获取与改变(综合案例)3. 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
templatedivh1page1/h1p改变state的值/p请输入:input v-modelmsg/button clickfun1获取state/buttonbutton clickfun2改变state/button/div
/templatescriptexport default{data(){return {msg:mrz}},methods:{fun1(){alert(this.$store.state.eduName)},fun2(){this.$store.commit(setEduName,{eduName:this.msg})}}}
/scriptstyle
/style
page2
templatedivh1page2/h1{{eduName}}/div/templatescriptexport default{data(){return {msg:mrz}},computed:{eduName(){return this.$store.getters.getEduName;}}}
/scriptstyle
/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/page2Vue.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-axiosVue.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
templatedivh1page1/h1p改变state的值/p请输入:input v-modelmsg /button clickfun1获取state/buttonbutton clickfun2改变state/buttonbutton clickfun3改变state/buttonbutton clickfun4请求后台/button/div
/templatescriptexport 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})}}}
/scriptstyle
/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; // 超时时间
总结
本文深入介绍了Vuex的核心概念和特点并通过三个大目录展示了在实际应用中如何使用Vuex进行状态管理。我们学习了如何获取和改变Vuex中的值以及如何处理异步请求。Vuex作为Vue.js生态系统中的重要组成部分在复杂应用开发中扮演着关键的角色。希望本文对于理解和应用Vuex有所帮助。
