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

總結

以上是生活随笔為你收集整理的vuex - 基础篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。