vuex - 基礎篇

在vue的使用過程當中，當單頁應用愈來愈大的時候，項目可能會出現要使用一些公共的數據，vue也設計了vuex供開發者在開發vue單頁應用時對應用公共數據進行一個更好的管理。

固然，在vue的項目中，使用vuex不必定是必要的，看項目須要。

what

vuex是一個vue的數據倉庫，由於vue是組件化開發，數據在組件內是局部的，若是須要作數據共享，好比登陸的用戶信息，其實全部的地方均可能會用到，這個時候抽離出來是頗有必要的。

數據流動

vuex是一個統一的數據管理，數據是經過vuex定義的規則來進行流動的。

vuex中數據只能經過mutation來提交，mutation只能進行同步操做，action進行異步操做。

核心

vuex提出了這幾個核心的概念

• state
• getter
• mutation
• action

state

state就是數據源，存儲着咱們定義的公共數據

在state中，存儲着咱們要的公共數據，在vue組件中，咱們能夠經過computed來獲取state數據，當state改變時，computed也會隨之更新。

// 定義
state: {
    userName: 'binnie'
}

// 使用
computed: {
    userName() {
       return this.$store.state.userName
    }
}
複製代碼

getter

getter，顧名思義，其實就是獲取數據，固然，若是要原封不動的state數據，直接獲取就行了。若是要獲取的數據是對state數據進行操做後返回，咱們能夠在computed裏面操做，也能夠看getter裏面處理，看需求狀況。getter屬於統一處理。

// 定義
getters: {
    userNamelen: state => {
        return state.userName.length
    }
}

// 使用
computed: {
    userNamelen() {
       return this.$store.getters.userNamelen
    }
}
複製代碼

mutation

vuex中，只有mutation能夠修改state的數據，而且mutation的修改只能是同步的。

// 定義
mutations: {
    userName(state, payload) {
        state.userName = payload.userName
    }
}

// 提交修改
store.commit('userName', { userName: 'change'})
複製代碼

action

mutation只能進行同步操做，異步操做的話就要放到action中處理。

// 定義
actions: {
    userName(context) {
        fetch().then((name) => {
            context.commit('userName', { userName: name})
        })
    }
}

// 提交修改
store.dispath('userName', {})
複製代碼

寫在最後

vuex做爲vue的數據管理倉庫，方便了咱們對公共數據的管理。

固然，關因而否須要使用是看項目須要。當項目中的數據須要抽出公共數據的狀況下使用是合適的；當項目較小或者數據基本不交叉，那就沒有比較使用vuex了。