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ù)。通過使用Vuex，我們可以將共享的數(shù)據(jù)以及與數(shù)據(jù)相關(guān)的邏輯統(tǒng)一管理，從而提高代碼的可讀性和可維護(hù)性。
在Vue.js應(yīng)用中，組件之間的通信可以通過props和事件來(lái)實(shí)現(xiàn)。然而，當(dāng)應(yīng)用規(guī)模較大時(shí)，組件之間的狀態(tài)交互變得更加復(fù)雜，而這些狀態(tài)往往需要在多個(gè)組件之間共享和同步。這時(shí)，使用Vuex可以讓我們更好地解決這些問題。
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ì)算或過濾，類似于組件中的computed屬性。Getter可以對(duì)state進(jìn)行派生，將其轉(zhuǎn)換成其他形式的值，便于組件使用。
- Mutation（突變）：用于修改state的值，必須是同步函數(shù)。將組件中的某個(gè)操作導(dǎo)致的狀態(tài)變更封裝成mutation，通過提交(commit) mutation來(lái)改變state的值。
- Action（行動(dòng)）：用于處理異步操作或復(fù)雜的業(yè)務(wù)邏輯，并提交(commit) mutation來(lái)改變state的值。Action可以包含任意異步操作，例如網(wǎng)絡(luò)請(qǐng)求、定時(shí)器等。組件中通過dispatch action來(lái)觸發(fā)異步操作。
- Module（模塊）：將大型應(yīng)用分割成更小的模塊，每個(gè)模塊擁有自己的state、getter、mutation和action，以實(shí)現(xiàn)更好的代碼組織和維護(hù)。
3.使用Vuex的好處
- 集中式管理：通過將狀態(tài)集中管理，使得狀態(tài)的變化更加可追蹤和可維護(hù)。
- 組件通信：Vuex提供了一種在組件間共享狀態(tài)的機(jī)制，簡(jiǎn)化了組件之間的通信過程。
- 開發(fā)效率：通過統(tǒng)一管理狀態(tài)和邏輯，減少了重復(fù)的代碼，提高了開發(fā)效率。
- 調(diào)試工具支持：Vue開發(fā)者工具提供了對(duì)Vuex的調(diào)試支持，方便我們查看和追蹤狀態(tài)的變化。
- 優(yōu)化性能：通過使用Getter對(duì)state進(jìn)行緩存，避免了重復(fù)計(jì)算成本，提高性能。
- 可擴(kuò)展性和可維護(hù)性：在大型應(yīng)用中，模塊化開發(fā)是必要的，使用Vuex可以有序地維護(hù)模塊之間的關(guān)系，使得代碼更易于維護(hù)和擴(kuò)展。Vuex的狀態(tài)管理機(jī)制也可以避免因?yàn)椴煌K數(shù)據(jù)交互不當(dāng)導(dǎo)致應(yīng)用整體性能問題。
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è)組件訪問和修改。
- 使用Getter獲取狀態(tài)：Getter用于對(duì)state進(jìn)行計(jì)算或過濾操作，類似于組件中的computed屬性。Getter可以對(duì)state進(jìn)行派生，將其轉(zhuǎn)換成其他形式的值，方便組件使用。
- 提交Mutation修改狀態(tài)：Mutation用于修改state的值，必須是同步函數(shù)。在store中定義mutation，然后通過commit方法提交(mutate)一個(gè)mutation來(lái)改變state的值。Mutation是Vuex中唯一修改state的方式，這樣做可以保證狀態(tài)變更的追蹤性。
- 分發(fā)Action處理異步操作：Action用于處理異步操作、復(fù)雜業(yè)務(wù)邏輯或批量的mutation。在store中定義action，然后通過dispatch方法觸發(fā)一個(gè)action的執(zhí)行。Action可以包含任意異步操作，例如網(wǎng)絡(luò)請(qǐng)求、定時(shí)器等。在action中可以根據(jù)需要觸發(fā)一個(gè)或多個(gè)mutation來(lái)改變state的值。
- 組件中使用狀態(tài)：在Vue組件中，可以通過computed屬性或者在template中使用{{}}表達(dá)式來(lái)獲取state或者Getter的值。當(dāng)需要修改state時(shí)，通過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文件傳遞過來(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.通過異步實(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.通過異步實(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秒，不能超過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傳遞過去
2.異步相應(yīng)時(shí)間超時(shí)內(nèi)容不會(huì)顯示，我們可以盡量避免時(shí)間過長(zhǎng)或者可以修改響應(yīng)后端超時(shí)的時(shí)間。
6.同步和異步的區(qū)別
- 同步操作是按順序執(zhí)行的，一般用于執(zhí)行時(shí)間較短的操作。而異步操作則是交由系統(tǒng)底層處理，程序繼續(xù)往下執(zhí)行。一般用于執(zhí)行時(shí)間較長(zhǎng)或需要等待的操作。
- 同步操作會(huì)阻塞主線程的執(zhí)行，而異步操作不會(huì)阻塞主線程的執(zhí)行。
- 異步操作不需要等待操作完成才能開始下一步操作，而同步操作需要等待操作完成后才能進(jìn)行下一步操作。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js element-ui tree樹形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹形控件改iview的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-03-03
Vue項(xiàng)目三級(jí)聯(lián)動(dòng)路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項(xiàng)目三級(jí)聯(lián)動(dòng)的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
本篇文章主要介紹了Vuex之理解Store的用法，Store類就是存儲(chǔ)數(shù)據(jù)和管理數(shù)據(jù)方法的倉(cāng)庫(kù)，實(shí)現(xiàn)方式是將數(shù)據(jù)和方法已對(duì)象形式傳入其實(shí)例中2017-04-04
這篇文章主要介紹了從0搭建vue3組件庫(kù)Input組件,每個(gè)功能的實(shí)現(xiàn)代碼都做了精簡(jiǎn),方便大家快速定位到核心邏輯,接下來(lái)就開始對(duì)這些功能進(jìn)行實(shí)例代碼講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
WebSocket是一種全雙工通信協(xié)議,通過HTTP升級(jí)機(jī)制建立連接,支持實(shí)時(shí)雙向數(shù)據(jù)傳輸,示例代碼展示了如何在Java Spring Boot和Vue.js中實(shí)現(xiàn)WebSocket服務(wù)和客戶端2025-02-02
element-ui?table表格底部合計(jì)自定義配置過程
這篇文章主要介紹了element-ui?table表格底部合計(jì)自定義配置過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問題解決辦法
最近項(xiàng)目更新頻繁,每次一更新客戶都說還跟之前的一樣,一查原因是因?yàn)榭蛻魶]有清空瀏覽器的緩存,所以為了方便客戶看到最新版本,開始調(diào)研再發(fā)布新版本后自動(dòng)清理緩存,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問題的解決辦法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
ant-design表單處理和常用方法及自定義驗(yàn)證操作
這篇文章主要介紹了ant-design表單處理和常用方法及自定義驗(yàn)證操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-10-10