2020前端技術面試必備Vue:(四)Vuex狀態管理

NO IMAGE
前三章陸續已經更新了Vue基本使用 和Vue Router的基本使用,如果你讀了前三篇文章的話,並且掌握差不多,那麼你現在可以開發簡單的應用了,例如Blog,電商網站……..唯一不足的是,隨著你的業務需求不斷增加,頁面中的狀態數據也不斷龐大,維護起來就特別困難了,Vue 提供了一種狀態管理 解決辦法 -Vuex,它的思想和React 的Redux 很像,頁面中的數據和邏輯都交給了store來管理了,這樣的好處就是,維護方便,單個組件代碼也整潔不少。

2020前端技術面試必備Vue:(四)Vuex狀態管理

到此,Vue 系列文章就結束了,Vue 全家桶已經講完了,如果你跟著讀了這前幾篇文章的話,你現在就可以實操的寫一個項目來體驗一下Vue的魅力。Vue 使用熟練可以了的話,下一步你應該進階更高一層了,那就是研究Vue 源碼。只有清楚原理了,自己造輪子玩那才有意思,對應你的money 也提高了,lavel 也 提升了,加油吧, 小夥伴們。

Vuex

安裝

npm install vuex --save

yarn add vuex


// Vuex 依賴 Promise,所有需要安裝 es6-promise

npm install es6-promise --save
yarn add es6-promise

Vuex 介紹

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
count: 0,
message: '測試信息'
},
mutations: {
},
actions: {
},
modules: {
}
})

State ——>驅動應用的數據源

1.在組件中 獲取store 中的state 數據
1. 在組件中 獲取store 中的state 數據

// 一般是 通過計算屬性中聲明屬性,然後使用 this.$store.state.數據源 來獲取數據的
computed: {
count () {
return store.state.count
}
}

如何獲取多個state呢?

如果想獲取多個state數據呢,其實可以在computed 中寫多個屬性 來獲取state,但是當state變化時,會重新求取計算屬性,並且觸發更新相關聯的 DOM,非常影響性能。

好在Vuex 提供了 mapState 輔助函數,減少不必要的開銷

1. 首先第一步 必須引入 mapState  
import { mapState } from 'vuex'

2. 在computed 使用即可
computed: mapState({
counts: state => state.count,
//counts為自定義的屬性: state參數 是stote中的state,然後直接通過state。數據源獲取即可
addNumber (state) {
return this.numbers + state.count
}
})


3. 在頁面 直接使用 自定義的屬性

Getter

作用類似 computed,但有緩存功能。

使用場景: 當一個組件需要過濾後的state值,你可以在組件中通過filter進行過濾,那麼其它組件也需要過濾後的值,你就的再 次過濾state。

​ 當使用getter 處理後,一次處理,多次使用,提高效率

export default new Vuex.Store({
state: {
count: 0,
message: '測試信息',
arr: [1, 2, 3, 4, 5, 6]
},
getters: {
filterArr: state => {
return state.arr.filter(items => items % 2 === 0)
}
}
})
mapGetters 輔助函數

mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性:

在組件中訪問getter 值
this.$store.getters.自定義的屬性

在 其它 組件訪問該getters 時,值仍然時 [ 2, 4, 6 ] 過濾後的

Mutation

Mutation 是用來更改Store的狀態的唯一方法。

它由 事件類型 和 回調函數構成。回調函數是用來更改state狀態的,參數為state

使用mutation:
  1. 必須在 mutation中註冊事件,
  2. 然後在組件中通過 store.commit(事件名) 來 觸發改變state的狀態
注意:

2020前端技術面試必備Vue:(四)Vuex狀態管理

store.commit 參數

store.commit 接收兩個參數

​ 第一個參數為: store.mutation中的事件名

​ 第二個參數為: 要傳遞的 載荷

mutations: {
increment (state, n) {
state.count += n
}
}


store.commit('increment', 10)


mapMutations輔助函數

mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用(需要在根節點注入 store)。

對象的提交方式
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}


mutations: {
increment (state, payload) {
state.count += payload.amount
}
}store.commit({
type: 'increment',
amount: 10
})
Mutation 使用技巧

在多人協作開發時,隨著 mutation 的 type 增多,會維護困難。

官方推薦採用 使用 事件類型,來處理,開發效率提高。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
state: { ... },
mutations: {
// 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函數名
[SOME_MUTATION] (state) {
// mutate state
}
}
})


Action

Action 功能類似 Mutation,

Action 支持 異步操作
Action 提交的 mutation, 不是直接修改state狀態

Action 接收參數: 與 store 實例具有相同方法和屬性的 context 對象

實例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
在組件中分發Action
this.$store.dispatch('xxx')
異步執行Action
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
mapActions輔助函數
Action 也支持載荷
// 以載荷形式分發
store.dispatch('incrementAsync', {
amount: 10
})

// 以對象形式分發
store.dispatch({
type: 'incrementAsync',
amount: 10
})

Module 模塊分割

當所有狀態對象都集中在個大的對象中,store維護將變得困難。這時,可以使用模塊分割成多個對象,最後將對象掛載到store的modeule中,Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割:

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

✨覺得不錯的點贊,幫忙轉發分享以下,原創不易!



✨關注微信公眾號’前端自學社區’ 獲取更多資料

2020前端技術面試必備Vue:(四)Vuex狀態管理

💥回覆加群 可以加入 自學前端群💥

相關文章

有了這款GitHubAction,碼雲的付費服務也能免費用!

centos7安裝ElasticSearch配置外網訪問

Chrome請求報錯net::ERR_CERT_AUTHORITY_INVALID

又來新需求了,急,Android怎麼實現時間線效果(上)?