Day01----Vuex 入門
Vuex 是什麽?
官方給出的解釋:Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
自制vuex LOGO
相信很多新選手看完這段話有種絕望的感覺。開始我也是這樣的,後來我想到了一個比方!
比如某年級有5個小班,每個小班有25個同學,但是只有一個老師授課,假如5個小班就對應著5個組件,每個班的25個同學就相當於每個組件中的25條數據,這個老師就相當於 vuex ,老師講的課就相當於每一條數據。要保證每個同學受到同樣的教育,就需要這個老師把每節課分別講5遍,還不能保證每個班的同學聽到的效果相同。一段時間後,老師覺得這樣特別麻煩還很累,就想了一個辦法,找了一個大教室,把這5個小班的同學合並到一起,這樣每個課程只需要講一次就好啦,而且還保證了每個班的同學聽到的效果相同。這就是 vuex 的作用,把各個組件中用到的數據統一管理,同步發放,省時省心省力。
那這個 vuex 怎麽用呢?讓我們從一個簡單的 Vue 計數應用開始
一、基本用法
1. 初始化並創建一個項目
vue init webpack-simple vuex-demo
cd vuex-demo
npm install
2. 安裝 vuex
npm install vuex -S
3. 在 src 目錄下創建 store.js 文件,並在 main.js 文件中導入並配置
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‘ //導入 store 對象
new Vue({
//配置 store 選項,指定為 store 對象,會自動將 store 對象註入到所有子組件中,在子組件中通過 this.$store 訪問該 store 對象
store,
el: ‘#app‘,
render: h => h(App)
})
4. 編輯 store.js 文件
在應用 vuex 之前,我們還是需要看懂這個流程圖,其實很簡單。
vuex① Vue Components
② 我們在組件中發出的動作,肯定是想獲取或者改變數據的,但是在 vuex 中,數據是集中管理的,我們不能直接去更改數據,所以會把這個動作提交(Commit)到 Mutations 中;
③ 然後 Mutations 就去改變(Mutate)State 中的數據;
④ 當 State 中的數據被改變之後,就會重新渲染(Render)到 Vue Components (組件)中去, Vue Components (組件)展示更新後的數據,完成一個流程。
Vuex 的 核心 是 Store(倉庫),相當於是一個容器,一個 Store 實例中包含以下屬性的方法:
state 定義屬性(狀態 、數據)
getters 用來獲取屬性
actions 定義方法(動作)
commit 提交變化,修改數據的唯一方式就是顯示的提交 mutations
mutations 定義變化,處理狀態(數據)的改變
mapGetters 用來獲取屬性(數據)
mapActions 用來獲取方法(動作)
store.js 中寫入
// 定義屬性(數據)
var state = {
count:6
}
// 創建 store 對象
const store = new Vuex.Store({
state
})
// 導出 store 對象
export default store;
方式1、 在 app.vue 中就能通過 this.$store
訪問該 store 對象 ,獲取該 count
。
其中需要註意的是
this.$store
中的 store 與 main.js 中配置的 store 相對應,一定要註意大小寫
<template>
<div id="app">
//把 count 方法直接寫入,可自己執行
<h1>{{count}}</h1>
</div>
</template>
<script>
export default {
name: ‘app‘,
computed:{
count(){
//返回獲取到的數據
return this.$store.state.count
}
}
}
</script>
執行
npm run dev
就能在頁面中看到傳過來的數據了
方式2、vuex 提供的 mapGetters 和 mapActions 來訪問
mapGetters 用來獲取屬性(數據)
① 在 app.vue 中引入 mapGetters
import {mapGetters} from ‘vuex‘
② 在 app.vue 文件的計算屬性中調用 mapGetters 輔助方法,並傳入一個數組,在數組中指定要獲取的屬性 count
<script>
import {mapGetters,mapActions} from ‘vuex‘
export default {
name: ‘app‘,
computed:mapGetters([
//此處的 count 與以下 store.js 文件中 getters 內的 count 相對應
‘count‘
])
}
</script>
③ 在 store.js 中定義 getters 方法並導出
getters 用來獲取屬性
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
// 定義屬性(數據)
var state = {
count:6
}
// 定義 getters
var getters={
//需要傳個形參,用來獲取 state 屬性
count(state){
return state.count
}
}
// 創建 store 對象
const store = new Vuex.Store({
state,
getters
})
// 導出 store 對象
export default store;
這樣頁面上就會顯示傳過來的數據了!接下來我們來通過動作改變獲取到的數據
④在 store.js 中定義 actions 和 mutations 方法並導出
actions 定義方法(動作)
commit 提交變化,修改數據的唯一方式就是顯示的提交 mutations
mutations 定義變化,處理狀態(數據)的改變
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
// 定義屬性(數據)
var state = {
count:6
}
// 定義 getters
var getters={
count(state){
return state.count
}
}
// 定義 actions ,要執行的動作,如流程的判斷、異步請求
const actions ={
// ({commit,state}) 這種寫法是 es6 中的對象解構
increment({commit,state}){
//提交一個名為 increment 的變化,名字可自定義,可以認為是類型名,與下方 mutations 中的 increment 對應
//commit 提交變化,修改數據的唯一方式就是顯式的提交 mutations
commit(‘increment‘)
}
}
// 定義 mutations ,處理狀態(數據) 的改變
const mutations ={
//與上方 commit 中的 ‘increment’ 相對應
increment(state){
state.count ++;
}
}
// 創建 store 對象
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
// 導出 store 對象
export default store;
⑤ 在 app.vue 中引入 mapActions ,並調用
mapActions 用來獲取方法(動作)
import {mapGetters,mapActions} from ‘vuex‘
調用 mapActions 輔助方法,並傳入一個數組,在數組中指定要獲取的方法 increment
<template>
<div id="app">
//這個 increment 方法與下面 methods 中的 increment 相對應
<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 來自 store.js 中導出的 actions 和 mutations 中的 increment
‘increment‘,
])
}
</script>
這樣就能通過 button
來改變獲取到的 count
了。
現在你可以通過
storel.state
來獲取狀態對象,以及通過store.commit
方法觸發狀態變更註意:我們通過提交
mutation
的方式,而非直接改變store.state.count
,是因為我們想更明確地追蹤到狀態的變化。
這是通過點擊事件讓 count++
,不妨自己試著寫一下 count--
吧!
看起來確實是挺繞的,需要在理解了原理的情況下,再細細琢磨,加深理解。
Day01----Vuex 入門