Vuex 入門教程
Vuex 是什么?
官方給出的解釋:Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
相信很多新選手看完這段話有種絕望的感覺。開始我也是這樣的,后來(lái)我想到了一個(gè)比方!
比如某年級(jí)有5個(gè)小班,每個(gè)小班有25個(gè)同學(xué),但是只有一個(gè)老師授課,假如5個(gè)小班就對(duì)應(yīng)著5個(gè)組件,每個(gè)班的25個(gè)同學(xué)就相當(dāng)于每個(gè)組件中的25條數(shù)據(jù),這個(gè)老師就相當(dāng)于 vuex ,老師講的課就相當(dāng)于每一條數(shù)據(jù)。要保證每個(gè)同學(xué)受到同樣的教育,就需要這個(gè)老師把每節(jié)課分別講5遍,還不能保證每個(gè)班的同學(xué)聽到的效果相同。一段時(shí)間后,老師覺得這樣特別麻煩還很累,就想了一個(gè)辦法,找了一個(gè)大教室,把這5個(gè)小班的同學(xué)合并到一起,這樣每個(gè)課程只需要講一次就好啦,而且還保證了每個(gè)班的同學(xué)聽到的效果相同。這就是 vuex 的作用,把各個(gè)組件中用到的數(shù)據(jù)統(tǒng)一管理,同步發(fā)放,省時(shí)省心省力。
那這個(gè) vuex 怎么用呢?讓我們從一個(gè)簡(jiǎn)單的 Vue 計(jì)數(shù)應(yīng)用開始
一、基本用法
1. 初始化并創(chuàng)建一個(gè)項(xiàng)目
vue init webpack-simple vuex-demo cd vuex-demo npm install
2. 安裝 vuex
npm install vuex -S
3. 在 src 目錄下創(chuàng)建 store.js 文件,并在 main.js 文件中導(dǎo)入并配置
store.js 中寫入
import Vue from 'vue' //引入 vuex 并 use import Vuex from 'vuex' Vue.use(Vuex)
main.js 文件
import Vue from 'vue' import App from './App.vue' import store from './assets/store' //導(dǎo)入 store 對(duì)象 new Vue({ //配置 store 選項(xiàng),指定為 store 對(duì)象,會(huì)自動(dòng)將 store 對(duì)象注入到所有子組件中,在子組件中通過(guò) this.$store 訪問該 store 對(duì)象 store, el: '#app', render: h => h(App) })
4. 編輯 store.js 文件
在應(yīng)用 vuex 之前,我們還是需要看懂這個(gè)流程圖,其實(shí)很簡(jiǎn)單。
vuex
① Vue Components 是我們的 vue 組件,組件會(huì)觸發(fā)(dispatch)一些事件或動(dòng)作,也就是圖中的 Actions;
② 我們?cè)诮M件中發(fā)出的動(dòng)作,肯定是想獲取或者改變數(shù)據(jù)的,但是在 vuex 中,數(shù)據(jù)是集中管理的,我們不能直接去更改數(shù)據(jù),所以會(huì)把這個(gè)動(dòng)作提交(Commit)到 Mutations 中;
③ 然后 Mutations 就去改變(Mutate)State 中的數(shù)據(jù);
④ 當(dāng) State 中的數(shù)據(jù)被改變之后,就會(huì)重新渲染(Render)到 Vue Components 中去,組件展示更新后的數(shù)據(jù),完成一個(gè)流程。
Vuex 的核心是 Store(倉(cāng)庫(kù)),相當(dāng)于是一個(gè)容器,一個(gè) Store 實(shí)例中包含以下屬性的方法:
state 定義屬性(狀態(tài) 、數(shù)據(jù))
store.js 中寫入
// 定義屬性(數(shù)據(jù)) var state = { count:6 } // 創(chuàng)建 store 對(duì)象 const store = new Vuex.Store({ state }) // 導(dǎo)出 store 對(duì)象 export default store;
方式1、 在 app.vue 中就能通過(guò) this.$store 訪問該 store 對(duì)象 ,獲取該 count 。
<template> <div id="app"> //把 count 方法直接寫入,可自己執(zhí)行 <h1>{{count}}</h1> </div> </template> <script> export default { name: 'app', computed:{ count(){ //返回獲取到的數(shù)據(jù) return this.$store.state.count } } } </script>
方式2、vuex 提供的 mapGetters 和 mapActions 來(lái)訪問
mapGetters 用來(lái)獲取屬性(數(shù)據(jù))
① 在 app.vue 中引入 mapGetters
import {mapGetters} from 'vuex'
② 在 app.vue 文件的計(jì)算屬性中調(diào)用 mapGetters 輔助方法,并傳入一個(gè)數(shù)組,在數(shù)組中指定要獲取的屬性 count
<script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ //此處的 count 與以下 store.js 文件中 getters 內(nèi)的 count 相對(duì)應(yīng) 'count' ]) } </script>
③ 在 store.js 中定義 getters 方法并導(dǎo)出
getters 用來(lái)獲取屬性
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義屬性(數(shù)據(jù)) var state = { count:6 } // 定義 getters var getters={ //需要傳個(gè)形參,用來(lái)獲取 state 屬性 count(state){ return state.count } } // 創(chuàng)建 store 對(duì)象 const store = new Vuex.Store({ state, getters }) // 導(dǎo)出 store 對(duì)象 export default store;
這樣頁(yè)面上就會(huì)顯示傳過(guò)來(lái)的數(shù)據(jù)了!接下來(lái)我們來(lái)通過(guò)動(dòng)作改變獲取到的數(shù)據(jù)
④在 store.js 中定義 actions 和 mutations 方法并導(dǎo)出
actions 定義方法(動(dòng)作)
commit 提交變化,修改數(shù)據(jù)的唯一方式就是顯示的提交 mutations
mutations 定義變化,處理狀態(tài)(數(shù)據(jù))的改變
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義屬性(數(shù)據(jù)) var state = { count:6 } // 定義 getters var getters={ count(state){ return state.count } } // 定義 actions ,要執(zhí)行的動(dòng)作,如流程的判斷、異步請(qǐng)求 const actions ={ // ({commit,state}) 這種寫法是 es6 中的對(duì)象解構(gòu) increment({commit,state}){ //提交一個(gè)名為 increment 的變化,名字可自定義,可以認(rèn)為是類型名,與下方 mutations 中的 increment 對(duì)應(yīng) //commit 提交變化,修改數(shù)據(jù)的唯一方式就是顯式的提交 mutations commit('increment') } } // 定義 mutations ,處理狀態(tài)(數(shù)據(jù)) 的改變 const mutations ={ //與上方 commit 中的 ‘increment' 相對(duì)應(yīng) increment(state){ state.count ++; } } // 創(chuàng)建 store 對(duì)象 const store = new Vuex.Store({ state, getters, actions, mutations }) // 導(dǎo)出 store 對(duì)象 export default store;
⑤ 在 app.vue 中引入 mapActions ,并調(diào)用
mapActions 用來(lái)獲取方法(動(dòng)作)
import {mapGetters,mapActions} from 'vuex'
調(diào)用 mapActions 輔助方法,并傳入一個(gè)數(shù)組,在數(shù)組中指定要獲取的方法 increment
<template> <div id="app"> //這個(gè) increment 方法與下面 methods 中的 increment 相對(duì)應(yīng) <button @click="increment">增加</button> <button>減少</button> <h1>{{count}}</h1> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ 'count' ]), methods:mapActions([ //該 increment 來(lái)自 store.js 中導(dǎo)出的 actions 和 mutations 中的 increment 'increment', ]) } </script>
這樣就能通過(guò) button 來(lái)改變獲取到的 count 了。
看起來(lái)確實(shí)是挺繞的,需要在理解了原理的情況下,再細(xì)細(xì)琢磨,加深理解。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09vue項(xiàng)目前端錯(cuò)誤收集之sentry教程詳解
Sentry 是一個(gè)開源的錯(cuò)誤追蹤工具,可以幫助開發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。這篇文章主要介紹了vue項(xiàng)目前端錯(cuò)誤收集之sentry,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別
這篇文章主要介紹了vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,需要的小伙伴可以參考一下2022-07-07vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決
在項(xiàng)目中使用elementui確實(shí)是很方便的一件事,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的相關(guān)資料,需要的朋友可以參考下2023-02-02Element-Plus實(shí)現(xiàn)動(dòng)態(tài)渲染圖標(biāo)的示例代碼
在Element-Plus中,我們可以使用component標(biāo)簽來(lái)動(dòng)態(tài)渲染組件,本文主要介紹了Element-Plus?實(shí)現(xiàn)動(dòng)態(tài)渲染圖標(biāo)教程,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03Vue結(jié)合openlayers按照經(jīng)緯度坐標(biāo)實(shí)現(xiàn)錨地標(biāo)記及繪制多邊形區(qū)域
OpenLayers是一個(gè)用于開發(fā)WebGIS客戶端的JavaScript包,最初基于BSD許可發(fā)行。OpenLayers是一個(gè)開源的項(xiàng)目,其設(shè)計(jì)之意是為互聯(lián)網(wǎng)客戶端提供強(qiáng)大的地圖展示功能,包括地圖數(shù)據(jù)顯示與相關(guān)操作,并具有靈活的擴(kuò)展機(jī)制2022-09-09