爲什麼要用 vuex ?
首先,需要清楚爲什麼要用 vuex ,當我們的應用遇到 **多個組件共享狀態** 時
- 多層級父子組件狀態傳遞會特別繁瑣
- 非嵌套父子組件狀態傳遞也會特別繁瑣
vuex
Vuex 是一個專爲 Vue.js 應用程序開發的 **狀態管理模式**,類似 redux
這種狀態管理模式包含:
這種模式遵循的是 單向數據流 模式
vuex 的工作流
Actions和Mutations可以說成是一個差不多的
安裝 vuex
npm i vuex
// or
yarn add vuex
引入 vuex
通過 `import` 引入
通過 `import` 方式引入,需要手動安裝(手動調用 `Vue.use(Vuex)`)
通過 \<script\> 引入
通過 \<script\> 方式引入,vuex 會自動安裝(也就是主動調用 `Vue.use(Vuex)`)
從 Store 開始
`Store` 就是倉庫,我們前面提到的 `state` 就存儲在 `store` 中,同時提交動作、修改狀態的方法也都由 `store` 提供和管理
創建一個 Store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {}
})
必須在 `Vue.use(Vuex)` 之後創建 `store`
核心概念
- state
- getters
- actions
- mutations
state
state 的創建
存儲應用狀態數據的對象,`state` 的值可以是一個對象,也可以是一個返回對象的函數,類似 vue 中組件的 `data` ,使用函數的方式
返回對象可以避免對象引用導致的副作用問題
通過 `store.state` 訪問狀態數據
`state` 數據與組件 `data` 一樣是被追蹤的
在組件中使用 store
問題: `state` 的更新並不會更新視圖
解決
用computed(計算屬性)
computed計算屬性
<template>
<div class="home">
<h2>{{title}}</h2>
<div>{{content}}</div>
</div>
</template>
<script>
import store from '@/stores'
export default {
name: 'home',
computed: {
title() {
return store.state.title
},
content() {
return store.state.content
}
}
}
</script>
store 配置
如果每個組件在使用 `store` 的時候都 `import` 會比較繁瑣,這個時候,我們通過 vuex 提供的 `store` 選項把 `store` 對象注入
到 vue 的原型上
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/stores'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
配置注入後,我們就可以在組件實例中使用 `this.$store` 來訪問 `store` 對象了
使用輔助函數 `mapState`
當一個組件需要獲取多個狀態時候,將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題,我們可以使用 `mapState`
輔助函數幫助我們生成計算屬性,讓你少按幾次鍵,通常我們把 `store` 的 `state` 通過 `mapState` 函數映射到組件的 `computed` 上
通過對象方式進行映射
場景:當組件中已有與 `store` 同名的數據名稱
使用擴展運算符組合
通過對象擴展運算符,可以把 `mapState` 返回的 `state` 屬性與組件已有計算屬性進行融合
getters
有時候我們需要從 store 中的 state 中派生出一些狀態,類似組件的 `data` 與 `computed`,`store` 也提供了一個 `getters` 對象來處理
派生數據
getters 函數
與組件屬性一樣,我們是通過定義一個函數的形式來返回派生數據的,` getters` 函數接受兩個參數
- 第一個參數:`state` 對象
- 第二個參數:`getters` 對象
通過屬性訪問
同樣的,與組件計算屬性一樣,默認是通過屬性的方式去訪問 `getters` 中的數據的,這種方式與組件的計算屬性一樣,
也是會緩存 結果的
通過方法訪問
我們還可以通過閉包函數的形式返回一個函數,來實現給 `getters` 函數傳參,需要注意的是這種方式不支持結果緩存
使用輔助函數 `mapGetters`
與 `mapState` 函數類似,通常映射到組件的 `computed` 上
mutations(改變)
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation(類似 redux 中的 action + reducer),Vuex 中的 mutation 非常類似於事件:
每個 mutation 都有一個字符串的 **事件類型 (type)** 和 一個 **回調函數 (handler)**
`mutation` 中的函數不要直接調用
commit(提交)
type
要提交的 `mutation` 回調函數名稱
payload
載荷:提交的額外數據,任意格式
mutation 函數
`mutation` 中的函數被 `commit` 執行的時候,接收兩個參數
- 第一個參數:`state` 對象
- 第二個參數: `commit` 提交的 `payload`
在 `mutation` 函數中,我們就可以通過 `state` 對象進行狀態數據的修改
使用輔助函數 `mapMutations`
`mapMutations` 函數的使用與 `mapState` 和 `mapGetters` 類似,但是其一般是把組件的 `methods` 映射
爲 `store` 的 `mutations` 的 `commit` 調用
mutation 函數必須是同步的
`commit` 方法沒有返回值
actions
`action` 中的函數與 `mutation` 中的函數類似,但是它主要用來進行異步任務的處理,然後通過提交 `mutation` 來修改 `state`
> 注意:`action` 中的函數不要直接修改 `state`
dispatch派發
`action` 任務需要通過 `dispatch` 方法來提交(派發),與 `commit` 類似
`dispatch` 方法有返回值,且一定返回一個 `promise` 對象
action 函數
`action` 中的函數執行的過程中也接受兩個參數
- 第一個參數:`store` 對象
- 第二個參數: `dispatch` 提交的 `payload`
使用輔助函數 `mapActions`
與 `mapMutations` 函數類似,把組件的 `methods` 映射爲 `store` 的 `actions` 的 `dispatch` 調用
Module
這個更多的是基於一種代碼組織結構上的輔助
https://vuex.vuejs.org/zh/guide/modules.html
https://vuex.vuejs.org/zh/guide/structure.html