Vue.js是一款流行的前端框架，可以建立高度可維護且可重複使用的使用者介面。它的主要優勢之一是它非常易於學習和使用，並且可以與其他庫和框架無縫協作。但是，當你的應用程式開始變得越來越複雜時，你可能會遇到一個問題：如何管理全域狀態和資料？這就是Vuex要解決的問題。
Vuex是一個狀態管理函式庫，它是為Vue.js設計。它的主要目的是使狀態的維護更易於管理。 Vuex呈現了一個單一的「資料來源」並以可預測的方式管理它。
在這篇文章中，我們將介紹Vuex的基礎知識，並示範如何在Vue.js中使用它來管理全域狀態和資料。
在深入Vuex之前，我們需要對其核心概念有一個基本的了解。
State是一個儲存應用程式狀態的物件。在Vuex中，狀態是響應式的，這表示當狀態改變時，所有使用該狀態的元件都會自動更新。通常情況下，您應該將狀態初始化為空物件。
const store = new Vuex.Store({
state: {
count: 0
}
})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必須是同步的。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})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)
}
}
})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的基礎知識，讓我們看看如何在Vue.js應用程式中使用它了。
要使用Vuex，請先將其安裝到您的專案中。可以使用npm安裝：
npm install vuex --save
安裝之後，您需要透過呼叫Vue.use()方法將其配置到Vue.js中：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
讓我們來建立一個非常簡單的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 }
]
}
})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)
}
}
})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
}
}
})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)
})
})
}
}
})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
}
})以上是Vue中如何使用vuex管理全域資料和狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！
