Vuex是什麼？

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。
它採用集中式儲存管理應用的所有元件的狀態，
並以相應的規則保證狀態以一種可預測的方式發生變化

這是vuex的官網，對vuex的解釋，乍一看挺難理解的， 什麼叫 狀態管理模式？， 什麼又是集中式儲存管理？，官網的描述不明覺厲。 首先我們就先來解釋這個定義。
所有的開源庫都是為了解決我們在實際開發的過程之中遇到的問題而出現的。而vuex就是為了解決我們在使用vue的過程中對多個檢視依賴於同一個狀態（或者說：我們很難在vue中通過一種優雅的方式建立全域性變數，並改變全域性變數的狀態）。現在理解了嗎？

1、vuex就是在vue中建立全域性變數的東西
2、vuex提供了一些優雅的方法，可以讓我們改變全域性變數的值

OK, 這就是vuex所解決的問題。

怎麼去用Vuex？

使用vuex的方式非常非常簡單，我們只需要記住幾個核心的概念就可以。

1、this.$store ： 我們可以通過 this.$store 在vue的元件中獲取 
vuex的例項。

2、State ： vuex中的資料來源，我們可以通過 this.$store.state 獲取
我們在vuex中宣告的全域性變數的值。

3、Getter： 相當於vue中的computed ， 及 計算屬性， 可以用於監聽、
計算 state中的值的變化

4、Mutation： vuex中去操作資料的方法 （只能同步執行）

5、Action： 用來操作 Mutation 的動作 ， 他不能直接去操作資料來源，
但可以把mutation變為非同步的

6、Module： 模組化，當你的應用足夠大的時候，你可以把你的vuex分成多個
子模組
 

這就是vuex中所有的概念了，是不是很簡單 ？ 下面就讓我們通過例項，看看他這些概念具體都是怎麼使用的。

上手Vuex

我們使用很真實，但是很簡單的專案引導大家去使用vuex。首先我們需要先使用vue-cli去初始化一個專案（不瞭解vue-cli的朋友可以去百度一下 ）。
專案建立完成之後，在src下建立store資料夾。結構如下

這個store資料夾，就是我們放置vuex檔案的地方。

在store資料夾下建立 index.js 作為我們生成vuex的檔案。

// index.js
import Vue from 'vue'; 
import Vuex from 'vuex';

// 需要註冊vuex到vue中
Vue.use(Vuex);

// 使用 es6 語法把vuex的例項物件輸出
export default new Vuex.Store({

})
 

然後在vue的初始檔案中註冊vuex的例項

    import store from './store'
    
    new Vue({
        ...
          store
    })

這樣 vuex 就已經註冊完成了 。

下面我們在vuex中去註冊我們前面說過的vuex的核心概念

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

Vue.use(Vuex);

export default new Vuex.Store({
    // 在state中去宣告全域性變數，可以通過 this.$store.state 訪問
    state: {
        count: 0
    },
    // 在getters中宣告state中變數的計算函式，快取計算後的資料， 通過 this.$store.getters 呼叫
    getters: {
        // 接受state作為引數，每次 count發生變化時 ， 都會被呼叫
        consoleCount: state => {
            console.log('the state count : ' + state.count);
        }
    },
    // 只能執行同步方法，不要去執行非同步方法 通過 this.$store.commit 方法去呼叫
    mutations: {
        // 改變state狀態的方法，不建議直接通過  
        // this.$store.state.? = ？的方式改變state中的狀態
        addCount: state => {
            ++state.count;
        },
        // mutations的第一個引數即為 state物件，並且可以向mutation傳入額外的引數
        addNumCount: (state, n) => {
            state.count+=n;
        },
    },
    // 藉助actions的手去 執行 mutations ， 通過  this.$store.dispatch 的方式呼叫
    // 可以用來執行非同步操作，可以跟蹤非同步資料狀態變化
    actions: {
        addCount: context => {
            // 呼叫 mutation
            context.commit('addCount');
        },
        addNumCount: (context, n) => {
            context.commit('addNumCount', n);
        }
    }
})

我們在程式碼中分別註冊了，state、getters、mutations、actions。

這樣我們就可以在任何一個 component中通過 this. $store.dispatch('addNumCount', 5); 或者 this.$store.dispatch(‘addCount’); 去觸發actions操作來改變state中的值。

很容易對不對？ 這些就是vuex中最基礎的概念，瞭解了這些，就可以入門vuex了。 但是vuex中還有一個我們前面列出來的核心概念，我們並沒有說 ， 他就是modules。 顧名思義 ， 模組。 也就是說當我們的專案足夠大的時候 ， 我們不希望吧所有的全域性變數和操作全域性變數的方法都放到一個檔案中的時候 ， 我們可以使用 modules去分割模組。

其他的一些概念，我們不在這篇部落格中去講解了，因為vuex的官網中的描述非常清楚，我還是建議大家如果想更深的瞭解vuex（包括模組化，vuex中推薦的專案結構，mapState，actions promise 等概念），可以去訪問 Vuex的官網 ， 一定會獲益良多的。

作者：LGD_Sunday
來源：CSDN
原文：https://blog.csdn.net/u011068996/article/details/80216154
版權宣告：本文為博主原創文章，轉載請附上博文連結！