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