點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
前言
前段時間，有小夥伴問我，Vuex是怎麼玩兒的？也是一直沒有機會，趁著今天有空，一起來學習一波。
本文章你能學到什麼？
1、Vuex是什麼？哪種功能場景使用它？
2、Vuex有哪幾種屬性？
3、使用Vuex的好處？
4、使用Vuex示例。
5、Vuex常見錯誤。
下面我們來詳細講講！
Vuex是什麼？哪種功能場景使用它？
官方話：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
簡單的說：Vuex是vue框架中狀態管理。
這裡就又出現一個問題：那什麼是“狀態管理模式”？
什麼是“狀態管理模式”？
把組件的共享狀態抽取出來，以一個全局單例模式管理。在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行為！這就是“狀態管理模式”。
應用場景有：單頁應用中，組件之間的數據狀態。 應用實例： 1、購物車功能； 2、下單頁面有選擇優惠券按鈕，點擊進入優惠券頁面，選擇後返回到下單頁，數據會綁定回來，顯示已選擇的優惠券； 3、登錄狀態等等
Vuex有哪幾種屬性？
有五種，分別是 State、 Getter、Mutation 、Action、 Module
Vuex的State特性
1、Vuex就是一個倉庫，倉庫裡面放了很多對象。其中state就是數據源存放地，對應於一般Vue對象裡面的data
2、state裡面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新
3、它通過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中
Vuex的Getter特性
1、getters 可以對State進行計算操作，它就是Store的計算屬性
2、雖然在組件內也可以做計算屬性，但是getters 可以在多組件之間複用
3、如果一個狀態只在一個組件內使用，是可以不用getters
Vuex的Mutation特性
Action 類似於 mutation，不同在於：Action 提交的是 mutation，而不是直接變更狀態；Action 可以包含任意異步操作。
Vuex的Module特性
Module 可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
使用Vuex的好處？
1、多層嵌套的組件、兄弟組件間的狀態會更好管理維護。
2、緩存一些當前要使用請求遠程或本地的數據集（刷新後會自己銷燬）。
3、有了第二條，就可以減少向服務器的請求，節省資源。如果你的用戶足夠多，那麼每多出一個請求，對公司來說，都是一大筆錢。
4、對開發者來說，如果你的項目足夠複雜，團隊的規模也不僅是一個人，數據集中處理更利於程序的穩定和維護。
使用Vuex示例
npm install vuex --save
<template>
count = {{$store.state.count}}
<button>+5/<button>
<button>-3/<button>
/<template>
創建一個vuex文件夾，文件夾裡面創建一個store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 首先聲明一個狀態 state
const state = {
count: 0
}
// 然後給 actions 註冊事件處理函數，當這個函數被觸發時，將狀態提交到 mutaions中處理
const actions = {
increment: ({ commit }) => commit('increment'), // 提交到mutations中處理
decrement: ({ commit }) => commit('decrement')
}
// 更新狀態
const mutations = {
increment (state) {
state.count = state.count + 5
},
decrement (state) {
state.count = state.count - 3
}
}
// 獲取狀態信息
const getters = {
}
// 下面這個相當關鍵了，所有模塊，註冊才能使用
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
...
import store from './vuex/store';
...
new Vue({
...
store
...
})
Vuex常見錯誤
很多時候，總是不知不覺的直接改變 store 中的狀態。這就導致了一個非常常見的錯誤：Do not mutate vuex store state outside mutation handlers.
改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation
...
this.store.commit('increment', 10);
改變一下store.js文件
...
const mutations = {
increment (state, params) {
// params=10
}
}
...
公告
閱讀更多 web秀 的文章
