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

到此,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:
必須在 mutation中註冊事件, 然後在組件中通過 store.commit(事件名)
來 觸發改變state的狀態注意:
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 的狀態
✨覺得不錯的點贊,幫忙轉發分享以下,原創不易!
✨關注微信公眾號’前端自學社區’ 獲取更多資料

💥回覆加群 可以加入 自學前端群💥
✨關注微信公眾號’前端自學社區’ 獲取更多資料

💥回覆加群 可以加入 自學前端群💥
相關文章
有了這款GitHubAction,碼雲的付費服務也能免費用!