vuex - 基礎篇

寫不好程式碼的格子襯衫發表於2019-02-26
Vue

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

當然，在vue的專案中，使用vuex不一定是必要的，看專案需要。

what

vuex是一個vue的資料倉儲，因為vue是元件化開發，資料在元件內是區域性的，如果需要做資料共享，比如登入的使用者資訊，其實所有的地方都可能會用到，這個時候抽離出來是很有必要的。

資料流動

vuex是一個統一的資料管理，資料是通過vuex定義的規則來進行流動的。

vuex中資料只能通過mutation來提交，mutation只能進行同步操作，action進行非同步操作。

vuex - 基礎篇

核心

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了。

相關文章