Vuex教程：如何管理Vue.js應用程序的狀態？

Vue.js是一個極富競爭力的JavaScript庫，因為它提供了一種靈活且易於使用的方式來創建用戶界面並與後端API進行交互。然而，它並沒有提供一個內建的、結構化的方法來管理應用程序的狀態（也就是數據）。

這裡就需要一個庫 —— Vuex。Vuex是一個專為Vue.js設計的狀態管理庫，提供了一種集中存儲、管理和協調狀態變化的方式。它將應用程序的狀態從視圖中抽離出來，使我們能夠更好地組織代碼，更快地進行調試和編寫測試。

一、Vuex基礎

在介紹Vuex API之前，我們先來了解一下Vuex最重要的三個概念：state、mutations和actions。

1.1 state

state是Vuex存儲應用程序級別狀態的地方。我們可以在組件中使用$store.state來訪問它。

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

這裡我們定義了一個狀態count並初始化為0。我們可以通過store.state.count來獲取它。

1.2 mutations

mutations是一個修改器函數，用來改變state的值。每個mutation都有一個字符串的類型(type)和一個處理函數(handler)。我們可以通過store.commit方法來調用mutation。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

// 在組件中調用
methods: {
  increment() {
    this.$store.commit('increment')
  },
  decrement() {
    this.$store.commit('decrement')
  },
}

在mutations中，我們定義了兩個方法increment和decrement來分別增加和減少count的值。在組件中，我們通過this.$store.commit(‘increment’)和this.$store.commit(‘decrement’)來調用它們。

1.3 actions

actions是異步方法，用來提交mutations。類似於mutations，每個action都有一個類型(type)和一個處理函數(handler)。我們可以通過store.dispatch方法來調用action。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

// 在組件中調用
methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync')
  },
}

在actions中，我們定義了一個incrementAsync方法用來異步增加count的值。在組件中，我們通過this.$store.dispatch(‘incrementAsync’)來調用它。

二、Vuex進階

2.1 getters

getters允許我們在對state進行操作之前，先對數據進行預處理。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'todo1', done: true },
      { id: 2, text: 'todo2', done: false },
      { id: 3, text: 'todo3', done: true },
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

// 在組件中調用
computed: {
  doneTodos() {
    return this.$store.getters.doneTodos
  },
  doneTodosCount() {
    return this.$store.getters.doneTodosCount
  }
}

在getters中，我們定義了一個doneTodos getter來返回已完成的todos，還定義了一個doneTodosCount來返回已完成的todos的數量。

2.2 modules

當我們應用程序的狀態變得非常大且複雜時，將所有state、mutations和actions都放在一個文件中就會變得非常不可維護。這時，Vuex modules提供了一種方式來將應用程序的狀態分割為更小、更可維護的單元。

// 創建一個counter module
const counter = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
}

// 創建一個store，並將counter module 註冊到 store中
const store = new Vuex.Store({
  modules: {
    counter
  }
})

// 在組件中調用
methods: {
  increment() {
    this.$store.commit('counter/increment')
  },
  decrement() {
    this.$store.commit('counter/decrement')
  },
  incrementAsync() {
    this.$store.dispatch('counter/incrementAsync')
  },
}

在這個例子中，我們創建了一個counter module，並將它註冊到store中。在組件中，我們通過this.$store.commit(‘counter/increment’)和this.$store.dispatch(‘counter/incrementAsync’)來調用它。

三、結束

這就是Vuex的基礎和進階。使用Vuex，我們可以更好地管理我們的應用程序狀態，並且更容易進行維護和測試。要了解更多關於Vuex的內容，請查看官方文檔。