(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）

目錄

自定義創(chuàng)建項目

vuex概述

構(gòu)建 vuex [多組件數(shù)據(jù)共享] 環(huán)境?

創(chuàng)建一個空倉庫

state 狀態(tài)

1. 提供數(shù)據(jù)：

2. 使用數(shù)據(jù)：

mutations?

輔助函數(shù) - mapMutations

actions

輔助函數(shù) - mapActions?

Getter?

模塊 module (進階語法)

訪問語法-state

訪問語法-getters

訪問語法-mutation

訪問語法-action

自定義創(chuàng)建項目

目標：基于 VueCli 自定義創(chuàng)建項目架子

開始創(chuàng)建項目

?

選擇自定義創(chuàng)建項目?

?

選擇文件需要配置的特性?

?

選擇版本?

是否選擇歷史模式

css預處理器選擇?

?

選擇ESLint規(guī)范?

選擇在什么時候開始校驗

?選擇配置文件存放位置

是否保存

vuex概述

1. 是什么：

vuex 是一個 vue 的 狀態(tài)管理工具 ，狀態(tài)就是數(shù)據(jù)。

大白話：vuex 是一個插件，可以幫我們 管理 vue 通用的數(shù)據(jù) (多組件共享的數(shù)據(jù)) 例如：購物車數(shù)據(jù) 個人信息數(shù)據(jù)

2. 場景：

① 某個狀態(tài) 在 很多個組件 來使用 (個人信息)

② 多個組件 共同維護 一份數(shù)據(jù) (購物車)

3. 優(yōu)勢：

① 共同維護一份數(shù)據(jù)， 數(shù)據(jù)集中化管理

② 響應式變化

③ 操作簡潔 (vuex提供了一些輔助函數(shù))

構(gòu)建 vuex [多組件數(shù)據(jù)共享] 環(huán)境?

效果是三個組件, 共享一份數(shù)據(jù):

任意一個組件都可以修改數(shù)據(jù)

三個組件的數(shù)據(jù)是同步的

創(chuàng)建一個空倉庫

// 這里存放的就是vuex相關的核心代碼
import Vue from 'vue'
import Vuex from 'vuex'

// 插件安裝
Vue.use(Vuex)

// 創(chuàng)建倉庫
const store = new Vuex.Store()

// 導出給main.js
export default store

state 狀態(tài)

1. 提供數(shù)據(jù)：

State 提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到 Store 中的 State 中存儲。

在 state 對象中可以添加我們要共享的數(shù)據(jù)

2. 使用數(shù)據(jù)：

① 通過 store 直接訪問

② 通過輔助函數(shù)

mapState是輔助函數(shù)，幫助我們把 store中的數(shù)據(jù) 自動 映射到 組件的計算屬性中

mutations?

目標：掌握 mutations 的操作流程，來修改 state 數(shù)據(jù)。 (state數(shù)據(jù)的修改只能通過 mutations )

1. 定義 mutations 對象，對象中存放修改 state 的方法

?2. 組件中提交調(diào)用 mutations

提交 mutation 是可以傳遞參數(shù)的 `this.$store.commit( 'xxx', 參數(shù) )`?

1. 提供 mutation 函數(shù) (帶參數(shù) - 提交載荷 payload )

2. 頁面中提交調(diào)用 mutation

?Tips: 提交參數(shù)只能一個，如果有多個參數(shù)，包裝成一個對象傳遞

輔助函數(shù) - mapMutations

目標：掌握輔助函數(shù) mapMutations，映射方法

mapMutations 和 mapState很像，它是把位于 mutations中的方法 提取了出來，映射到 組件methods 中

actions

目標：明確 actions 的基本語法，處理異步操作。

說明： mutations 必須是同步的 (便于監(jiān)測數(shù)據(jù)變化，記錄調(diào)試)

1. 提供action 方法

2. 頁面中 dispatch 調(diào)用?

輔助函數(shù) - mapActions?

mapActions 是把位于 actions中的方法提取了出來，映射到組件methods中

Getter?

說明：除了state之外，有時我們還需要從state中 派生出一些狀態(tài) ，這些狀態(tài)是依賴state的，此時會用到getters

目標：掌握核心概念 getters 的基本語法 (類似于計算屬性)

例如：state中定義了list，為 1-10 的數(shù)組，組件中，需要顯示所有大于5的數(shù)據(jù)

1. 定義 getters

2. 訪問getters

① 通過 store 訪問 getters

② 通過輔助函數(shù) mapGetters 映射

模塊 module (進階語法)

由于 vuex 使用 單一狀態(tài)樹 ，應用的所有狀態(tài) 會集中到一個比較大的對象 。

當應用變得非常復雜時， store 對象就有可能變得相當臃腫。(當項目變得越來越大的時候，Vuex會變得越來越難以維護)

模塊拆分：

user模塊: store/modules/user.js

訪問語法-state

目標：掌握模塊中 state 的訪問語法

盡管已經(jīng)分模塊了，但其實子模塊的狀態(tài)，還是會掛到根級別的 state 中，屬性名就是模塊名

使用模塊中的數(shù)據(jù)：

① 直接通過模塊名訪問 $store.state.模塊名.xxx

② 通過 mapState 映射

????????默認根級別的映射 mapState([ 'xxx' ])

????????子模塊的映射 mapState('模塊名', ['xxx']) - 需要開啟命名空間

訪問語法-getters

目標：掌握模塊中 getters 的訪問語法

使用模塊中 getters 中的數(shù)據(jù)：

① 直接通過模塊名訪問 $store.getters['模塊名/xxx ']

② 通過 mapGetters 映射

????????默認根級別的映射 mapGetters([ 'xxx' ])

????????子模塊的映射 mapGetters('模塊名', ['xxx']) - 需要開啟命名空間

?文章來源地址http://www.zghlxwxcb.cn/news/detail-623800.html

訪問語法-mutation

目標：掌握模塊中 mutation 的調(diào)用語法

注意：默認模塊中的 mutation 和 actions 會被掛載到全局， 需要開啟命名空間 ，才會掛載到子模塊。

調(diào)用子模塊中 mutation：

① 直接通過 store 調(diào)用 $store.commit('模塊名/xxx ', 額外參數(shù))

② 通過 mapMutations 映射

????????默認根級別的映射 mapMutations([ 'xxx' ])

????????子模塊的映射 mapMutations('模塊名', ['xxx']) - 需要開啟命名空間

訪問語法-action

目標：掌握模塊中 action 的調(diào)用語法 (同理 - 直接類比 mutation 即可)

注意：默認模塊中的 mutation 和 actions 會被掛載到全局， 需要開啟命名空間 ，才會掛載到子模塊。

調(diào)用子模塊中 action ：

① 直接通過 store 調(diào)用 $store.dispatch('模塊名/xxx ', 額外參數(shù))

② 通過 mapActions 映射

????????默認根級別的映射 mapActions([ 'xxx' ])

????????子模塊的映射 mapActions('模塊名', ['xxx']) - 需要開啟命名空間

到了這里，關于前端Vue入門-day07-Vuex入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！