Vuex存值取值與異步請(qǐng)求處理方式
更新時(shí)間：2025年04月09日 17:04:37 作者：孤留光乩
本文將詳細(xì)介紹Vuex的使用方法,包括參數(shù)值的獲取、修改,以及異步數(shù)據(jù)處理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
前言
在大型的Vue.js應(yīng)用中，我們經(jīng)常需要共享狀態(tài)和進(jìn)行復(fù)雜的狀態(tài)管理。
Vuex是一個(gè)專為Vue.js設(shè)計(jì)的狀態(tài)管理庫(kù)，提供了一種集中式的方式來(lái)管理應(yīng)用的所有組件的狀態(tài)。
一、Vuex簡(jiǎn)介
1.Vuex是什么
Vuex是一個(gè)專為Vue.js應(yīng)用設(shè)計(jì)的狀態(tài)管理庫(kù)。它提供了一種集中式的方式來(lái)管理應(yīng)用的所有組件的狀態(tài)，并且使得狀態(tài)的變化變得可追蹤、可維護(hù)。通過(guò)使用Vuex，我們可以將共享的數(shù)據(jù)以及與數(shù)據(jù)相關(guān)的邏輯統(tǒng)一管理，從而提高代碼的可讀性和可維護(hù)性。
在Vue.js應(yīng)用中，組件之間的通信可以通過(guò)props和事件來(lái)實(shí)現(xiàn)。然而，當(dāng)應(yīng)用規(guī)模較大時(shí)，組件之間的狀態(tài)交互變得更加復(fù)雜，而這些狀態(tài)往往需要在多個(gè)組件之間共享和同步。這時(shí)，使用Vuex可以讓我們更好地解決這些問(wèn)題。
2.Vuex的核心概念
- State（狀態(tài)）：存儲(chǔ)應(yīng)用的所有狀態(tài)數(shù)據(jù)，類似于組件中的data選項(xiàng)。但是與組件的data不同的是，state存儲(chǔ)的狀態(tài)是全局共享的。
- Getter（獲取器）：用于對(duì)state進(jìn)行計(jì)算或過(guò)濾，類似于組件中的computed屬性。Getter可以對(duì)state進(jìn)行派生，將其轉(zhuǎn)換成其他形式的值，便于組件使用。
- Mutation（突變）：用于修改state的值，必須是同步函數(shù)。將組件中的某個(gè)操作導(dǎo)致的狀態(tài)變更封裝成mutation，通過(guò)提交(commit) mutation來(lái)改變state的值。
- Action（行動(dòng)）：用于處理異步操作或復(fù)雜的業(yè)務(wù)邏輯，并提交(commit) mutation來(lái)改變state的值。Action可以包含任意異步操作，例如網(wǎng)絡(luò)請(qǐng)求、定時(shí)器等。組件中通過(guò)dispatch action來(lái)觸發(fā)異步操作。
- Module（模塊）：將大型應(yīng)用分割成更小的模塊，每個(gè)模塊擁有自己的state、getter、mutation和action，以實(shí)現(xiàn)更好的代碼組織和維護(hù)。
3.使用Vuex的好處
- 集中式管理：通過(guò)將狀態(tài)集中管理，使得狀態(tài)的變化更加可追蹤和可維護(hù)。
- 組件通信：Vuex提供了一種在組件間共享狀態(tài)的機(jī)制，簡(jiǎn)化了組件之間的通信過(guò)程。
- 開(kāi)發(fā)效率：通過(guò)統(tǒng)一管理狀態(tài)和邏輯，減少了重復(fù)的代碼，提高了開(kāi)發(fā)效率。
- 調(diào)試工具支持：Vue開(kāi)發(fā)者工具提供了對(duì)Vuex的調(diào)試支持，方便我們查看和追蹤狀態(tài)的變化。
- 優(yōu)化性能：通過(guò)使用Getter對(duì)state進(jìn)行緩存，避免了重復(fù)計(jì)算成本，提高性能。
- 可擴(kuò)展性和可維護(hù)性：在大型應(yīng)用中，模塊化開(kāi)發(fā)是必要的，使用Vuex可以有序地維護(hù)模塊之間的關(guān)系，使得代碼更易于維護(hù)和擴(kuò)展。Vuex的狀態(tài)管理機(jī)制也可以避免因?yàn)椴煌K數(shù)據(jù)交互不當(dāng)導(dǎo)致應(yīng)用整體性能問(wèn)題。
4.Vuex執(zhí)行流程
- 創(chuàng)建Vuex Store：首先，在Vue.js應(yīng)用中創(chuàng)建一個(gè)Vuex store實(shí)例。這個(gè)實(shí)例將會(huì)承載應(yīng)用的所有狀態(tài)和相關(guān)的邏輯。我們可以在主入口文件（通常是main.js）中創(chuàng)建store實(shí)例，并將其注入到根Vue實(shí)例中。
- 定義狀態(tài)(State)：在Vuex的store中定義state，即應(yīng)用的所有狀態(tài)數(shù)據(jù)。這些數(shù)據(jù)是共享的，可以被多個(gè)組件訪問(wèn)和修改。
- 使用Getter獲取狀態(tài)：Getter用于對(duì)state進(jìn)行計(jì)算或過(guò)濾操作，類似于組件中的computed屬性。Getter可以對(duì)state進(jìn)行派生，將其轉(zhuǎn)換成其他形式的值，方便組件使用。
- 提交Mutation修改狀態(tài)：Mutation用于修改state的值，必須是同步函數(shù)。在store中定義mutation，然后通過(guò)commit方法提交(mutate)一個(gè)mutation來(lái)改變state的值。Mutation是Vuex中唯一修改state的方式，這樣做可以保證狀態(tài)變更的追蹤性。
- 分發(fā)Action處理異步操作：Action用于處理異步操作、復(fù)雜業(yè)務(wù)邏輯或批量的mutation。在store中定義action，然后通過(guò)dispatch方法觸發(fā)一個(gè)action的執(zhí)行。Action可以包含任意異步操作，例如網(wǎng)絡(luò)請(qǐng)求、定時(shí)器等。在action中可以根據(jù)需要觸發(fā)一個(gè)或多個(gè)mutation來(lái)改變state的值。
- 組件中使用狀態(tài)：在Vue組件中，可以通過(guò)computed屬性或者在template中使用{{}}表達(dá)式來(lái)獲取state或者Getter的值。當(dāng)需要修改state時(shí)，通過(guò)commit一個(gè)mutation或dispatch一個(gè)action來(lái)觸發(fā)狀態(tài)的變化。
- 模塊化管理：對(duì)于大型應(yīng)用，可以將store分割成多個(gè)模塊，每個(gè)模塊擁有自己的state、getter、mutation和action。這樣可以更好地組織和維護(hù)代碼。
二、Vuex的使用步驟
1.安裝Vuex
npm i -S vuex@3.6.2
在package.json中可以看到Vuex
2.創(chuàng)建store模塊，分別維護(hù)state/actions/mutations/getters
注：在store/index.js文件中新建vuex的store實(shí)例，并注冊(cè)引入各大模塊
3.使用Vuex存儲(chǔ)值，獲取值和改變值
1.state.js---存值
export default{
name:'美猴王'
}2.mutations.js---改變值
export default{
setName:(state,payload)=>{
//state指的是state.js文件中導(dǎo)出的對(duì)象
//payload是vue文件傳遞過(guò)來(lái)的參數(shù)
state.name=payload.name
}
}3.getters.js---取值
export default{
getName:(state)=>{
//state指的是state.js文件中導(dǎo)出的對(duì)象
return state.name;
}
}4.store/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 store5.在main.js中導(dǎo)入并使用store實(shí)例
6.在views下創(chuàng)建vuex目錄并創(chuàng)建One.vue組件
<template>
<div>
<h1>我是number one</h1>
猴名：<input v-model="msg"/>
<button @click="fun1">獲取vuex的值</button>
<button @click="fun2">改變vuex的值</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'吉吉'
}
},
methods: {
fun1(){
let name= this.$store.state.name;
alert(name)
},
fun2(){
this.$store.commit('setName',{
name:this.msg
})
}
}
}
</script>
<style>
</style>效果演示
7.跨頁(yè)面獲取值
<template>
<div>
<h1>我是number Two</h1>
{{name}}
</div>
</template>
<script>
export default {
computed:{
name(){
// return this.$store.state.name;
return this.$store.getters.getName;
}
}
}
</script>
<style>
</style>注：
- return this.$store.state.name;打破了封裝性
- return this.$store.getters.getName;用該方法也同樣可以獲取值
效果演示
4.通過(guò)異步實(shí)現(xiàn)獲取和改變值
action.js:異步改變值
export default {
setNameSynac:(context,payload) => {
//context指的是vuex的上下文
setTimeout(function(){
context.commit('setName',payload)
},6000)
}
};One.vue組件
<template>
<div>
<h1>我是number one</h1>
猴名：<input v-model="msg" />
<button @click="fun1">獲取vuex的值</button>
<button @click="fun2">改變vuex的值</button>
<button @click="fun3">異步改變vuex的值</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '吉吉'
}
},
methods: {
fun1() {
let name = this.$store.state.name;
alert(name)
},
fun2() {
this.$store.commit('setName', {
name: this.msg
})
},
fun3() {
this.$store.dispatch('setNameSynac', {
name: this.msg
})
}
}
}
</script>
<style>
</style>效果演示
5.通過(guò)異步實(shí)現(xiàn)發(fā)送Ajax到后端請(qǐng)求
后端代碼
package com.ctb.ssm.controller;
import com.ctb.ssm.util.JsonResponseBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;
@RestController
@RequestMapping("/vuex")
public class VuexController {
@RequestMapping("/queryVuex")
public JsonResponseBody<?> queryVuex(HttpServletRequest request) {
String resturantName = request.getParameter("resturantName");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String date = sdf.format(new Date());
try {
System.out.println("模擬異步情況，睡眠5秒，不能超過(guò)10秒，axios超時(shí)時(shí)間設(shè)置的是10秒！");
Thread.sleep(5000);
System.out.println("睡醒了，繼續(xù)...");
} catch (Exception e) {
e.printStackTrace();
}
return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);
}
}src/api/action.js配置后端請(qǐng)求
'VUEX': '/vuex/queryVuex', //Vuex后端異步獲取
src/store/action.js異步發(fā)送Ajax請(qǐng)求到后端
setNameAjax: (context, payload) => {
let _this=payload._this
let url = _this.axios.urls.VUEX
let params = {
resturantName: payload.name
}
_this.axios.post(url, params).then(r => {
console.log(r)
}).catch(r => {
});
}One.vue組件
<template>
<div>
<h1>我是number one</h1>
猴名：<input v-model="msg" />
<button @click="fun1">獲取vuex的值</button>
<button @click="fun2">改變vuex的值</button>
<button @click="fun3">異步改變vuex的值</button>
<button @click="fun4">異步發(fā)送Ajax請(qǐng)求到后端</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '吉吉'
}
},
methods: {
fun1() {
let name = this.$store.state.name;
alert(name)
},
fun2() {
this.$store.commit('setName', {
name: this.msg
})
},
fun3() {
this.$store.dispatch('setNameSynac', {
name: this.msg
})
},
fun4() {
this.$store.dispatch('setNameAjax', {
name: this.msg,
_this: this
})
}
}
}
</script>
<style>
</style>效果演示
注：
1.在store/action.js中this并不代表vue實(shí)例，所以我們需在vue組件中將this傳遞過(guò)去
2.異步相應(yīng)時(shí)間超時(shí)內(nèi)容不會(huì)顯示，我們可以盡量避免時(shí)間過(guò)長(zhǎng)或者可以修改響應(yīng)后端超時(shí)的時(shí)間。
6.同步和異步的區(qū)別
- 同步操作是按順序執(zhí)行的，一般用于執(zhí)行時(shí)間較短的操作。而異步操作則是交由系統(tǒng)底層處理，程序繼續(xù)往下執(zhí)行。一般用于執(zhí)行時(shí)間較長(zhǎng)或需要等待的操作。
- 同步操作會(huì)阻塞主線程的執(zhí)行，而異步操作不會(huì)阻塞主線程的執(zhí)行。
- 異步操作不需要等待操作完成才能開(kāi)始下一步操作，而同步操作需要等待操作完成后才能進(jìn)行下一步操作。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫(kù)的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取吧2023-08-08
Vue如何整合mavon-editor編輯器(markdown編輯和預(yù)覽)
這篇文章主要介紹了Vue整合mavon-editor編輯器(markdown編輯和預(yù)覽)的相關(guān)知識(shí)，mavon-editor是目前比較主流的markdown編輯器，重點(diǎn)介紹它的使用方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了VUE調(diào)用本地json的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue 中使用vue2-highcharts實(shí)現(xiàn)曲線數(shù)據(jù)展示的方法
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實(shí)現(xiàn)曲線數(shù)據(jù)展示的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中使用animate.css實(shí)現(xiàn)炫酷動(dòng)畫(huà)效果
這篇文章主要介紹了vue中使用animate.css實(shí)現(xiàn)動(dòng)畫(huà)效果,我們使用它，只需要寫(xiě)很少的代碼，就可以實(shí)現(xiàn)非常炫酷的動(dòng)畫(huà)效果，感興趣的朋友跟隨小編一起看看吧2022-04-04
使用element Table表格獲取勾選的數(shù)據(jù)
通過(guò)實(shí)例介紹了如何使用elementTable表格組件獲取勾選的數(shù)據(jù),總結(jié)個(gè)人經(jīng)驗(yàn),旨在為讀者提供參考和學(xué)習(xí)資源2025-12-12
使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2025-03-03
這篇文章主要Vue 處理表單input單行文本框的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue路由組件通過(guò)props配置傳參的實(shí)現(xiàn)
本文主要介紹了Vue路由組件通過(guò)props配置傳參的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用,本文給大家介紹Vue 概述及基本使用,感興趣的朋友跟隨小編一起看看吧2025-10-10