Vue中如何使用vuex管理全局数据和状态-Vue.js-PHP中文网

Vue中如何使用vuex管理全局数据和状态

WBOY

发布： 2023-06-11 10:21:29

原创

1494人浏览过

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安装：

析稿Ai写作

科研人的高效工具：AI论文自动生成，十分钟万字，无限大纲规划写作思路。

142

查看详情

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中文网其它相关文章！