Vue中如何使用vuex管理全域資料和狀態

Vue.js是一款流行的前端框架，可以建立高度可維護且可重複使用的使用者介面。它的主要優勢之一是它非常易於學習和使用，並且可以與其他庫和框架無縫協作。但是，當你的應用程式開始變得越來越複雜時，你可能會遇到一個問題：如何管理全域狀態和資料？這就是Vuex要解決的問題。

Vuex是一個狀態管理函式庫，它是為Vue.js設計。它的主要目的是使狀態的維護更易於管理。 Vuex呈現了一個單一的「資料來源」並以可預測的方式管理它。

在這篇文章中，我們將介紹Vuex的基礎知識，並示範如何在Vue.js中使用它來管理全域狀態和資料。

Vuex的基礎

在深入Vuex之前，我們需要對其核心概念有一個基本的了解。

State

State是一個儲存應用程式狀態的物件。在Vuex中，狀態是響應式的，這表示當狀態改變時，所有使用該狀態的元件都會自動更新。通常情況下，您應該將狀態初始化為空物件。

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

Getter

Getter是用來從狀態中取得資料的函數。當我們需要對狀態進行計算或篩選時，可以使用Getter。 getter 接受 state 作為其第一個參數。 Getter可以是計算出來的屬性，也可以是函數。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        todoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    }
})

Mutation

Mutation用於更改狀態。變更狀態時，您必須使用Mutation而不是直接變更狀態。這個約定使得我們可以追蹤每個狀態的變化，並且可以在這些變化發生時進行除錯或回溯。 Mutation必須是同步的。

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

Action

Action用於執行非同步任務和提交Mutation。 Action通常包含非同步邏輯，例如API呼叫。當呼叫Action時，它將提交Mutations，而不是直接更改狀態。

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

Module

Vuex應用程式通常具有一個大型狀態樹。為了使狀態樹成為可維護的，可以將其拆分為幾個單獨的模組。透過模組，我們可以輕鬆地組織程式碼並隔離狀態。

const counterModule = {
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
}

const store = new Vuex.Store({
    modules: {
        counter: counterModule
    }
})

使用Vuex管理全域狀態

現在我們已經了解Vuex的基礎知識，讓我們看看如何在Vue.js應用程式中使用它了。

安裝Vuex

要使用Vuex，請先將其安裝到您的專案中。可以使用npm安裝：

npm install vuex --save

安裝之後，您需要透過呼叫Vue.use()方法將其配置到Vue.js中：

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

Vue.use(Vuex)

定義State

讓我們來建立一個非常簡單的Todo List應用程序，以示範如何在Vue.js中使用Vuex。

首先，我們需要定義一個初始狀態，在這個情況下，我們將定義一個todos陣列：

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    }
})

取得State

##現在我們定義了我們的狀態，讓我們看看如何使用Getter來獲取狀態。

Getter允許我們從狀態中獲取資料並進行計算。在我們的Todo List應用程式中，我們可以使用Getter來取得特定狀態或已完成和未完成的todos。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    }
})

更改State

如果要更改狀態，則需要使用Mutation。根據我們的應用程序，我們可以定義兩個Mutation：新增Todo和切換完成狀態。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    }
})

執行Actions

在我們的Todo List應用程式中，我們可能需要執行一些非同步操作。例如，如果要從伺服器取得todos，則必須使用非同步Action。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
})

使用模組

隨著您的Vuex狀態變得更加複雜，您可能需要將其拆分為多個模組。

在我們的應用程式中，我們可以將Todo List應用程式狀態拆分為兩個模組：Todo和User。 Todo模組包含Todo清單資料和相關操作。 User模組包含使用者資訊。

const todoModule = {
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
}

const userModule = {
    state: {
        user: null
    },
    mutations: {
        setUser: (state, user) => {
            state.user = user
        },
        clearUser: (state) => {
            state.user = null
        }
    },
    actions: {
        login: ({ commit }, user) => {
            api.login(user, () => {
                commit('setUser', user)
            })
        },
        logout: ({ commit }) => {
            api.logout(() => {
                commit('clearUser')
            })
        }
    }
}

const store = new Vuex.Store({
    modules: {
        todo: todoModule,
        user: userModule
    }
})

總結

Vuex是一個非常強大的狀態管理函式庫，可協助我們優雅地管理Vue.js應用程式的狀態和資料。透過使用Vuex，我們可以輕鬆存取和更改全域狀態，而不必手動在元件之間傳遞資料。請記住，最佳實踐是在需要時按需使用Vuex。對於簡單的應用程序，只使用本地組件狀態可能足以完全滿足您的需求。但是，如果您的應用程式變得越來越複雜，則可以考慮使用Vuex來管理狀態。

以上是Vue中如何使用vuex管理全域資料和狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！