Vue狀態(tài)管理工具Vuex工作原理解析
一、什么是vuex
Vuex是vue項(xiàng)目的狀態(tài)管理器(狀態(tài)管理工具)。vue項(xiàng)目的狀態(tài)是通過vue實(shí)例(組件)綁定的變量來體現(xiàn)。所以也可以說vuex是用來管理vue項(xiàng)目中的各種變量(vue項(xiàng)目中的組件可以訪問vuex中管理的變量——方便了組件的通信)
二、vuex的工作方式
(1)在全局中定義一個(gè)state:state本質(zhì)是一個(gè)對象,該對象的屬性就是vue組件用到的變量(所有組件共享這些變量)
(2)在vue組件中若要更新state的值,必須通過mutation來進(jìn)行(只能通過mutation去改變state的狀態(tài)),只能同步修改(即mutation中的方法都是同步的)
(3)若要異步的修改state的值,需要通過action來進(jìn)行(action不能直接修改state,但是它可以向mutation發(fā)起請求,由mutation來修改state的值,可以在action中定義異步方法)
三、vuex的使用場景
(1)不適合:小型的簡單應(yīng)用
(2)適合:中大型單頁面應(yīng)用
多個(gè)視圖(多個(gè)組件)依賴同一個(gè)狀態(tài)
不同的視圖的行為需要改變同一個(gè)狀態(tài)
四、工作流程
View-->Action-->Mutations-->State-->View
五、vuex的核心API
(1)state:
必須是唯一的
本質(zhì)是一個(gè)對象,維護(hù)的是vue的狀態(tài)
const state = {
屬性名:初始化值
}
state:{
屬性名:初始化值
}
(2)mutations
作用:用來修改state
定義了多個(gè)用于修改state的方法
只能包含同步代碼
定義方式:
const mutations = {
方法名1(state,[data]){
//更改state的屬性值
},
方法名2(state,[data]){
//更改state的屬性值
},
}
觸發(fā)方式:
(1)在actions中通過commit('mutations 的方法名')實(shí)現(xiàn)觸發(fā)
(2)在組件中通過 this.$store.commit('方法名',params)實(shí)現(xiàn)觸發(fā)
(3)actions:通過actions去觸發(fā)mutations中的方法,實(shí)現(xiàn)對state的異步修改
- 可以包含異步代碼
- 通過commit觸發(fā)mutations來間接修改state
- 觸發(fā)方式(如何觸發(fā)actions):在組件中通過this.$store.dispatch('action名稱',data1)進(jìn)行觸發(fā)
- 定義方式
const actions = {
方法名({commit,state},data1){
commit('mutations中的方法名')
}
}
(4)getters:用于獲取state的屬性值,類似于state的計(jì)算屬性
定義方法:
const getters = {
方法名([參數(shù)]){
return state.屬性名
}
}
在組件中的使用方式: this.$store.getters.方法名
(5)modules:在大型項(xiàng)目中用于管理多個(gè)子模塊的state
六、應(yīng)用
注意版本:vuex3對應(yīng)的vue2,vuex4對應(yīng)的vue3
(1)安裝vuex
npm install vuex@3 | npm i vuex@3 -S
(2)定義vuex的store(倉庫)
src/store/store.js
導(dǎo)入vue和vuex
import Vue from 'vue' import Vuex from 'vuex' //全局注冊vuex Vue.use(Vuex) //定義全局的store:即定義全局的狀態(tài)管理器(數(shù)據(jù)倉庫) export default new Vuex.Store({ state:{ }, mutations:{}, actions:{}, getters:{}, modules:{} })
在main.js文件中進(jìn)行配置
import Vue from 'vue' import App from './App.vue' // 導(dǎo)入vuex的配置文件 import store from "@/store/store"; // 在vue實(shí)例中引用 new Vue({ store, render: function (h) { return h(App) }, }).$mount('#app')
注:
在組件中觸發(fā)mutations中定義的方法:觸發(fā)同步方法
this.$store.commit('mutations中定義的方法名',參數(shù))
在組件中觸發(fā)actions中定義的方法:觸發(fā)異步方法
this.$store.dispatch('actions中定義的方法名')
獲取state中屬性值的方法:
1.直接獲?。簍his.$store.state.屬性名
2.通過getters:this.$store.getters.屬性名
在定義vuex的store實(shí)例時(shí)不能使用this
七、vuex的工作流程
(1)在組件中通過commit直接向mutations提交修改state的請求、或者通過dispatch向actions派發(fā)請求
(2)mutations通過接收到的請求去修改state的狀態(tài)
到此這篇關(guān)于Vue狀態(tài)管理工具Vuex工作原理解析的文章就介紹到這了,更多相關(guān)Vue Vuex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue項(xiàng)目中 實(shí)現(xiàn)定義全局變量 全局函數(shù)操作
這篇文章主要介紹了在vue項(xiàng)目中 實(shí)現(xiàn)定義全局變量 全局函數(shù)操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue移動(dòng)端輕量級的輪播組件實(shí)現(xiàn)代碼
這篇文章主要介紹了vue移動(dòng)端輕量級的輪播組件實(shí)現(xiàn)代碼,一個(gè)簡單的移動(dòng)端卡片滑動(dòng)輪播組件,適用于Vue2.x。本文給大家?guī)砹藢?shí)例代碼,需要的朋友參考下吧2018-07-07Vue如何實(shí)現(xiàn)打包資源按時(shí)間戳方式
這篇文章主要介紹了Vue如何實(shí)現(xiàn)打包資源按時(shí)間戳方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05詳解element-ui級聯(lián)菜單(城市三級聯(lián)動(dòng)菜單)和回顯問題
這篇文章主要介紹了詳解element-ui級聯(lián)菜單(城市三級聯(lián)動(dòng)菜單)和回顯問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue3+elementui-plus實(shí)現(xiàn)一個(gè)接口上傳多個(gè)文件功能
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)一個(gè)接口上傳多個(gè)文件,先使用element-plus寫好上傳組件,然后假設(shè)有個(gè)提交按鈕,點(diǎn)擊上傳文件請求接口,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07