第 3 部分：了解 Vuex：一个状态管理库

今天药忘吃喽~ 2024-03-16 13:03 105阅读 0赞

什么是 Vuex？

在现代 Web 应用程序中，当应用程序的大小和复杂性增加时，管理状态可能会变得混乱。这就是 Vuex 的状态管理库 Vuex 的用武之地。将 Vuex 存储视为一个大容器，其中包含组件所需的所有重要信息。无需在组件之间来回传递数据，您只需将其放入商店并从应用程序的任何位置访问它。它提供了一种集中式方法来管理应用程序所有组件中使用的数据。

注意：在本系列中选择使用 Vuex 是因为我使用的是 Vue 2。

Vuex 遵循一种单向流模式，这有助于保持清晰且可预测的数据流，从而更容易理解和调试应用程序的状态变化。

在单向流模式中，数据来自一个源，在 Vuex 的例子中是“存储”。存储包含应用程序的状态，组件可以通过提交变更或调度操作来访问和修改状态。

此处的示例代码 src/store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
       
        
      state: {
       
        
      },
      getters: {
       
        
      },
      mutations: {
       
        
      },
      actions: {
       
        
      },
      modules: {
       
        
      }
    })

以下是 Vuex 中关键组件和概念的细分：

1.  state：状态代表应用程序的数据。它是一个单一的 JavaScript 对象，充当整个应用程序的真实来源。所有组件都可以访问状态但不能直接修改它。
2.  getters：getter 是允许您从存储中派生和访问特定状态的函数。它们提供类似计算属性的接口来访问状态并对其执行计算或转换。
3.  mutations: Vue中的突变帮助我们以可控的方式更新和修改数据。它们使我们的组件能够根据不同的条件或用户交互做出反应和改变。这就像对某事进行更改或调整以使其与众不同。例如，当您有一张图片并且您决定在其上绘制或绘制一些新内容以改变它的外观时。要更改 vuex 状态，您必须通过分派操作或直接从组件调用它来提交更改。
4.  actions: Actions类似于mutations，但是可以处理异步操作。操作可以提交突变并执行诸如从 API 获取数据、更新状态，然后提交突变以修改状态等任务。动作是通过分派动作来调用的。
5.  modules：随着应用程序的增长，管理大型集中式状态可能变得具有挑战性。Vuex 中的模块有助于将状态和相关逻辑分解为更小、可重用和可管理的块。每个模块都可以有自己的状态、getters、突变和动作。

组件 Vuex 通信

在此示例中，我们将使用 Vuex 存储作为我们的中央数据存储介质来创建一个迷你应用程序。为了这个练习，我们还将利用模块系统将商店分成更小的部分。通常模块应该在商店规模增加时发挥作用，但我会做一个简短的例子，这样你就可以看到它是如何工作的。

此示例基于处理表单输入以在用户从组件内调度操作时更新商店中的状态。更新后的数据随后呈现在组件页面上。

创建状态数据、动作和突变  
源代码/商店/index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
       
        
      state: {
       
        
        id: 2,
        name:'Component vue communication',
        stack:'VueJs',
      },
      getters: {
       
        
        getUserName(state){
       
        
          return state.name;
        }
      },
      mutations: {
       
        
        SET_USERNAME(state, payload){
       
        
          state.name = payload
        }
      },
      actions: {
       
        
        actionSetUsername({
       
         commit }, data){
       
        
          commit('SET_USERNAME' , data);
        }
      },
      modules: {
       
        
      }
    })

在 MyComponent 中，单击“设置名称”按钮时将调度“actionSetUsername”操作

您还必须映射商店中的用户名值以显示当前值

源/商店/MyComponent.vue

<template>
       <div>
          <h1>{
       
        {
       
         name }}</h1>
          <p>{
       
        {
       
        </