Vuex 是一个应用程序 state 管理库 Vue.js,允许您管理和同步 component 应用程序中不同的数据。 Vuex 实现了Flux架构,使得管理应用变得简单高效 state。
Vuex 包括 中的关键概念
1. State
in代表您的应用 state 程序 Vuex 的集中式数据存储。 它保存了需要在不同的应用程序之间共享的数据 component。 state 下面是定义 a in 的示例 Vuex:
2. Mutations
Mutations 负责修改 state in Vuex. 它们是同步函数,以当前 state 和有效负载作为参数。 这是定义突变的示例 Vuex:
3. Actions
Actions 用于处理异步操作并分派 mutations 修改 state. 它们可以包含 API 调用、异步任务或复杂逻辑。 以下是在 中定义操作的示例 Vuex:
4. Getters
Getters 允许您检索和计算 state 从 Vuex 存储中导出的内容。 它们对于在将数据返回到 s 之前访问和操作数据很有用 component。 下面是在 中定义 getter 的示例 Vuex:
要安装 Vuex 到您的项目中 Vue.js,您可以按照以下步骤操作
步骤1: Vuex 通过npm或yarn 安装:
或者
步骤2: store.js
在项目的根目录中 创建一个文件。 这是我们声明和管理应用程序的地方 state。
步骤 3: 在 store.js
文件中导入 Vuex 并创建一个新的 store 对象:
第 4 步: 在 main.js
文件中导入商店并将其链接到您的 Vue 应用程序:
第 5 步: Vuex 现在您已经在项目中 安装并设置了。 您可以在文件中 声明您的 state s、 getters、 mutations 和 ,并在您的 Vue 中使用它们 。 actions store.js
component
例子:
在 store.js
文件中,您可以声明一个简单的 state 和突变的,如下所示:
在 Vue 中 component,您可以 state 通过使用 和 函数来使用 和 突变: mapState
mapMutations
通过这些步骤,您已成功安装 Vuex 并可以使用它来管理 state 您的 Vue.js 应用程序。
有了它 Vuex,您可以轻松、一致地管理应用程序 state。 它增强了代码的可维护性和可重用性,同时提供了结构化的数据管理方法。