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è)專(zhuān)為Vue.js設(shè)計(jì)的狀態(tài)管理庫(kù)，提供了一種集中式的方式來(lái)管理應(yīng)用的所有組件的狀態(tài)。

一、Vuex簡(jiǎn)介

1.Vuex是什么

Vuex是一個(gè)專(zhuān)為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ù)，類(lèi)似于組件中的data選項(xiàng)。但是與組件的data不同的是，state存儲(chǔ)的狀態(tài)是全局共享的。
Getter（獲取器）：用于對(duì)state進(jìn)行計(jì)算或過(guò)濾，類(lèi)似于組件中的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ò)濾操作，類(lèi)似于組件中的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 store

5.在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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuex存值取值與異步請(qǐng)求處理方式

目錄

前言

一、Vuex簡(jiǎn)介

1.Vuex是什么

2.Vuex的核心概念

3.使用Vuex的好處

4.Vuex執(zhí)行流程

二、Vuex的使用步驟

1.安裝Vuex

3.使用Vuex存儲(chǔ)值，獲取值和改變值

4.通過(guò)異步實(shí)現(xiàn)獲取和改變值

5.通過(guò)異步實(shí)現(xiàn)發(fā)送Ajax到后端請(qǐng)求

6.同步和異步的區(qū)別

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuex存值取值與異步請(qǐng)求處理方式

目錄

前言

一、Vuex簡(jiǎn)介

1.Vuex是什么

2.Vuex的核心概念

3.使用Vuex的好處

4.Vuex執(zhí)行流程

二、Vuex的使用步驟

1.安裝Vuex

3.使用Vuex存儲(chǔ)值，獲取值和改變值

4.通過(guò)異步實(shí)現(xiàn)獲取和改變值

5.通過(guò)異步實(shí)現(xiàn)發(fā)送Ajax到后端請(qǐng)求

6.同步和異步的區(qū)別

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、Vuex簡(jiǎn)介

3.使用Vuex存儲(chǔ)值，獲取值和改變值