【Vuex状态管理】Vuex的基本使用;核心概念State、Getters、Mutations、Actions、Modules的基本使用

news2024/10/6 8:38:42

目录

  • 1_应用状态管理
    • 1.1_状态管理
    • 1.2_复杂的状态管理
    • 1.3_Vuex的状态管理
  • 2_Vuex的基本使用
    • 2.1_安装
    • 2.2_创建Store
    • 2.3_组件中使用store
  • 3_核心概念State
    • 3.1_单一状态树
    • 3.2_组件获取状态
    • 3.3_在setup中使用mapState
  • 4_核心概念Getters
    • 4.1_getters的基本使用
    • 4.2_getters第二个参数
    • 4.3_getters的返回函数
    • 4.4_mapGetters的辅助函数
  • 5_核心概念Mutations
    • 5.1_使用
    • 5.2_Mutation常量类型
    • 5.3_mutation重要原则
  • 6_核心概念Actions
    • 6.1_基本使用
    • 6.2_分发操作
    • 6.3_actions的异步操作
  • 7_核心概念Modules
    • 7.1_module的基本使用
    • 7.2_module的局部状态
    • 7.3_module的命名空间
    • 7.4_module修改或派发根组件

1_应用状态管理

1.1_状态管理

在开发中,应用程序需要处理各种各样的数据,这些数据需要保存在应用程序中的某一个位置,对于这些数据的管理就称之为是 状态管理。

在前面是如何管理自己的状态呢?

  • 在Vue开发中,使用组件化的开发方式;
  • 而在组件中定义data或者在setup中返回使用的数据,这些数据称之为state;
  • 在模块template中可以使用这些数据,模块最终会被渲染成DOM,称之为View;
  • 在模块中会产生一些行为事件,处理这些行为事件时,有可能会修改state,这些行为事件称之为actions;

1.2_复杂的状态管理

JavaScript开发的应用程序,已经变得越来越复杂了:

  • JavaScript需要管理的状态越来越多,越来越复杂;
  • 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等;
  • 也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页;

当的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态;
  • 来自不同视图的行为需要变更同一状态;

是否可以通过组件数据的传递来完成呢?

  • 对于一些简单的状态,确实可以通过props的传递或者Provide的方式来共享状态;
  • 但是对于复杂的状态管理来说,显然单纯通过传递和共享的方式是不足以解决问题的,比如兄弟组件如何共享数据呢

1.3_Vuex的状态管理

管理不断变化的state本身是非常困难的:

  • 状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;
  • 当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪;

因此,是否可以考虑将组件的内部状态抽离出来,以一个全局单例的方式来管理呢?

  • 在这种模式下,组件树构成了一个巨大的 “试图View”;
  • 不管在树的哪个位置,任何组件都能获取状态或者触发行为;
  • 通过定义和隔离状态管理中的各个概念,并通过强制性的规则来维护视图和状态间的独立性,的代码边会变得更加结构化和易于维护、跟踪;

这就是Vuex背后的基本思想,它借鉴了Flux、Redux、Elm(纯函数语言,redux有借鉴它的思想);
Vue官方也在推荐使用Pinia进行状态管理,后续学习


参考官网的图
在这里插入图片描述


2_Vuex的基本使用

2.1_安装

npm install


2.2_创建Store

每一个Vuex应用的核心就是store(仓库): store本质上是一个容器,它包含着应用中大部分的状态(state);

Vuex和单纯的全局对象有什么区别?

  • 第一:Vuex的状态存储是响应式的。 当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会被更新;

  • 第二:不能直接改变store中的状态。

    • 改变store中的状态的唯一途径就显示提交 (commit) mutation;
    • 这样使得可以方便的跟踪每一个状态的变化,从而让能够通过一些工具帮助更好的管理应用的状态;

demo:

(1)在src文件夹下,建立一个新文件夹store,在该文件夹下,一般创建index.js文件,也可根据实际开发创建。

src/store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: () => ({
    counter: 100
  })
})  

(2)在main.js注册

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

(3)在App.vue中调用

<template>
  <div class="app">
    <!-- store中的counter -->
    <h2>App当前计数: {{ $store.state.counter }}</h2>
  </div>
</template>

2.3_组件中使用store

在组件中使用store,按照如下的方式:

  • 在模板tempte中使用,比如2.2的demo
  • 在options api中使用,比如computed;
  • 在setup中使用;
<template>
  <div class="app">
      <!-- 在模板tempte中使用store -->
    <h2>Home当前计数: {{ $store.state.counter }}</h2>
    <h2>Computed当前计数: {{ storeCounter }}</h2>
    <h2>Setup当前计数: {{ counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  export default {
      //在options api中使用,比如computed;
    computed: {
      storeCounter() {
        return this.$store.state.counter
      }
    }
  }
</script>

<!-- 在setup中使用store -->
<script setup>
  import { toRefs } from 'vue'
  import { useStore } from 'vuex'

  const store = useStore()
  const { counter } = toRefs(store.state)
  
  function increment() {
    store.commit("increment")
  }
</script>

3_核心概念State

3.1_单一状态树

Vuex 使用单一状态树:

  • 用一个对象就包含了全部的应用层级的状态;
  • 采用的是SSOT,Single Source of Truth,也可以翻译成单一数据源;

这也意味着,每个应用将仅仅包含一个 store 实例, 单状态树和模块化并不冲突,后面会涉及到module的概念;

单一状态树的优势:

  • 如果状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难;
  • 所以Vuex也使用了单一状态树来管理应用层级的全部状态;
  • 单一状态树能够让最直接的方式找到某个状态的片段;
  • 而且在之后的维护和调试过程中,也可以非常方便的管理和维护;

3.2_组件获取状态

在前面的demo已知如何在组件中获取状态了。

当然,如果觉得那种方式有点繁琐(表达式过长),可以使用计算属性:

    computed: {
      storeCounter() {
        return this.$store.state.counter
      }
    }

但是,如果有很多个状态都需要获取话,可以使用mapState的辅助函数:

  • mapState的方式一:对象类型;
  • mapState的方式二:数组类型;
  • 也可以使用展开运算符和来原有的computed混合在一起;

3.3_在setup中使用mapState

在setup中如果单个获取状态是非常简单的, 通过useStore拿到store后去获取某个状态即可。

但是如果使用 mapState 如何获取状态?

(1) 默认情况下,Vuex并没有提供非常方便的使用mapState的方式,下面这种方式不建议使用

<template>
  <div class="app">
    <!-- 在模板中直接使用多个状态 -->
    <h2>name: {{ $store.state.name }}</h2>
    <h2>level: {{ $store.state.level }}</h2>
    <h2>avatar: {{ $store.state.avatarURL }}</h2>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  import { mapState, useStore } from 'vuex'

  // 一步步完成,步骤繁琐
  const { name, level } = mapState(["name", "level"])
  const store = useStore()
  const cName = computed(name.bind({ $store: store }))
  const cLevel = computed(level.bind({ $store: store }))
</script>

(2)这里进行了一个函数的封装,简化步骤

src/hooks/useState.js

import { computed } from 'vue'
import { useStore, mapState } from 'vuex'

export default function useState(mapper) {
  const store = useStore()
  const stateFnsObj = mapState(mapper)
  
  const newState = {}
  Object.keys(stateFnsObj).forEach(key => {
    newState[key] = computed(stateFnsObj[key].bind({ $store: store }))
  })

  return newState
}

使用该函数

<template>
  <div class="app">
    <!-- 在模板中直接使用多个状态 -->
    <h2>name: {{ $store.state.name }}</h2>
    <h2>level: {{ $store.state.level }}</h2>
    <h2>avatar: {{ $store.state.avatarURL }}</h2>
  </div>
</template>

<script setup>
  import useState from "../hooks/useState"
  // 使用useState封装函数
  const { name, level } = useState(["name", "level"])
</script>

(3)更推荐下面的使用方式

<template>
  <div class="app">
    <!-- 在模板中直接使用多个状态 -->
    <h2>name: {{ $store.state.name }}</h2>
    <h2>level: {{ $store.state.level }}</h2>
    <h2>avatar: {{ $store.state.avatarURL }}</h2>
  </div>
</template>

<script setup>
  import { computed, toRefs } from 'vue'
  import { mapState, useStore } from 'vuex'

  // 3.直接对store.state进行解构(推荐)
  const store = useStore()
  const { name, level } = toRefs(store.state)
</script>

4_核心概念Getters

4.1_getters的基本使用

某些属性可能需要经过变化后来使用,这个时候可以使用getters

在这里插入图片描述


4.2_getters第二个参数

getters可以接收第二个参数

  getters: {
    // 2.在该getters属性中, 获取其他的getters
    message(state, getters) {
      return `name:${state.name} level:${state.level} friendTotalAge:${getters.totalAge}`
    }

  }

4.3_getters的返回函数

  getters: {
    // 3.getters是可以返回一个函数的, 调用这个函数可以传入参数(了解)
    getFriendById(state) {
      return function(id) {
        const friend = state.friends.find(item => item.id === id)
        return friend
      }
    }
  }

4.4_mapGetters的辅助函数

可以使用mapGetters的辅助函数

<template>
  <div class="app">
    <h2>doubleCounter: {{ doubleCounter }}</h2>
    <h2>friendsTotalAge: {{ totalAge }}</h2>
    <!-- 根据id获取某一个朋友的信息 -->
    <h2>id-111的朋友信息: {{ getFriendById(111) }}</h2>
    <h2>id-112的朋友信息: {{ getFriendById(112) }}</h2>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters(["doubleCounter", "totalAge"]),
      ...mapGetters(["getFriendById"])
    }
  }
</script>

也可在setup中使用

<template>
  <div class="app">
    <h2>message: {{ message }}</h2>
  </div>
</template>

<script setup>
  import { computed, toRefs } from 'vue';
  import { mapGetters, useStore } from 'vuex'

  const store = useStore()

  // 1.使用mapGetters ,较麻烦
  // const { message: messageFn } = mapGetters(["message"])
  // const message = computed(messageFn.bind({ $store: store }))

  // 2.直接解构, 并且包裹成ref
  // const { message } = toRefs(store.getters)

  // 3.针对某一个getters属性使用computed
  const message = computed(() => store.getters.message)
</script>

5_核心概念Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

5.1_使用

在提交mutation的时候,会携带一些数据,这时可以使用参数,注意payload为对象类型

mutation :{
 add(state,payload){
   statte.counter + = payload
 }
}

提交

$store.commit({
  type: "add",
  count: 100
})

5.2_Mutation常量类型

demo:

(1)在mutaition-type.js,定义常量

export const CHANGE_INFO = "changeInfo"

(2)在store使用常量

  mutations: {
      [CHANGE_INFO](state, newInfo) {
      state.level = newInfo.level
      state.name = newInfo.name
    }
  }

(3)在使用的
在这里插入图片描述


5.3_mutation重要原则

一条重要的原则就是,mutation 必须是同步函数

  • 这是因为devtool工具会记录mutation的日记;
  • 每一条mutation被记录,devtools都需要捕捉到前一状态和后一状态的快照;
  • 但是在mutation中执行异步操作,就无法追踪到数据的变化;

6_核心概念Actions

6.1_基本使用

Action类似于mutation,不同在于:

  • Action提交的是mutation,而不是直接变更状态;

  • Action可以包含任意异步操作;

有一个非常重要的参数context:

  • context是一个和store实例均有相同方法和属性的context对象;
  • 所以可以从其中获取到commit方法来提交一个mutation,或者通过 context.state 和 context.getters 来获取 state 和getters;

具体案例参考这篇文章 :https://blog.csdn.net/qq_21980517/article/details/103398686


6.2_分发操作

在这里插入图片描述


6.3_actions的异步操作

Action 通常是异步的,可以通过让action返回Promise,知道 action 什么时候结束,然后,在Promise的then中来处理完成后的操作。

demo:

index.js中,以发送网络请求为例

action{
	fetchHomeMultidataAction(context) {
      // 1.返回Promise, 给Promise设置then
      // fetch("http://123.207.32.32:8000/home/multidata").then(res => {
      //   res.json().then(data => {
      //     console.log(data)
      //   })
      // })
      
      // 2.Promise链式调用
      // fetch("http://123.207.32.32:8000/home/multidata").then(res => {
      //   return res.json()
      // }).then(data => {
      //   console.log(data)
      // })
      return new Promise(async (resolve, reject) => {
        // 3.await/async
        const res = await fetch("http://123.207.32.32:8000/home/multidata")
        const data = await res.json()
        
        // 修改state数据
        context.commit("changeBanners", data.data.banner.list)
        context.commit("changeRecommends", data.data.recommend.list)

        resolve("aaaaa")
      })
    }
 }   

test3.vue中

<script setup>
  import { useStore } from 'vuex'
  // 告诉Vuex发起网络请求
  const store = useStore()
  store.dispatch("fetchHomeMultidataAction").then(res => {
    console.log("home中的then被回调:", res)
  })

</script>



7_核心概念Modules

7.1_module的基本使用

Module的理解?

  • 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store 对象就有可能变得相当臃肿;
  • 为了解决以上问题,Vuex 允许将 store 分割成模块(module);
  • 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
    在这里插入图片描述

7.2_module的局部状态

对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象
在这里插入图片描述


7.3_module的命名空间

默认情况下,模块内部的action和mutation仍然是注册在全局的命名空间中的:

  • 这样使得多个模块能够对同一个 action 或 mutation 作出响应;
  • Getter 同样也默认注册在全局命名空间;

如果希望模块具有更高的封装度和复用性,可以添加 namespaced: true 的方式使其成为带命名空间的模块, 当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

demo:counter,js

const counter = {
  namespaced: true, //命令空间
  state: () => ({
    count: 99
  }),
  mutations: {
    incrementCount(state) {
      console.log(state)
      state.count++
    }
  },
  getters: {
    doubleCount(state, getters, rootState) {
      return state.count + rootState.rootCounter
    }
  },
  actions: {
    incrementCountAction(context) {
      context.commit("incrementCount")
    }
  }
}

export default counter

7.4_module修改或派发根组件

在action中修改root中的state,那么有如下的方式
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/947700.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c++ boost::json

Boost社区12月11日发布了1.75版本&#xff0c;在之前&#xff0c;​​Boost使用Boost.PropertyTree解析​​JSON​​​&#xff0c;​​XML​​​&#xff0c;​​INI​​​和​​INFO​​​格式的文件。但是由于成文较早及需要兼容其他的数据格式&#xff0c;相比较于其他的​…

怎么自学嵌入式?

嵌入式开发&#xff0c;简直就是一个无穷无尽的知识海洋&#xff01;你永远都学不够&#xff01;当然啦&#xff0c;这并不意味着你得花个三五年才能掌握。如果你只是想找嵌入式开发的工作&#xff0c;其实只需花三五个月有针对性地学习&#xff0c;就可以完全hold住。本文就给…

MybatisPlus核心功能

文章目录 一、前言二、核心功能2.1、条件构造器2.1.1、基础查询条件2.1.2、复杂查询条件2.1.3、动态查询条件2.1.4、查询结果排序2.1.5、执行查询 2.2、主键策略2.2.1、自增主键策略2.2.2、UUID 主键策略2.2.3、雪花算法主键策略2.2.4、自定义 ID 生成策略 三、总结 一、前言 …

学习node之——如何在项目中使用MySQL、前后端的身份认证

上一篇文章只写了一丢丢&#xff0c;这篇才是正片&#xff0c;look look look 一、使用mysql模块操作数据库 1、查询数据 这里连接数据库的用户和密码都是我们在安装mysql时配置的密码。每个人的users表格里面数据不同&#xff0c;结果也会不一样哟&#xff01; // 导入mys…

使用Spring Boot和Kafka实现消息发送和订阅

文章目录 一&#xff0c;新建Spring Boot1&#xff0c;Maven配置2&#xff0c;无法识别为SpringBoot项目3&#xff0c;无效的源发行版4&#xff0c;无法访问SpringApplication5&#xff0c;运行直接Finish6&#xff0c;服务运行成功 二&#xff0c;安装启动Kafka1&#xff0c;下…

从零开始学习 Java:简单易懂的入门指南之查找算法及排序算法(二十)

查找算法及排序算法 常见的七种查找算法&#xff1a;1. 基本查找2. 二分查找3. 插值查找4. 斐波那契查找5. 分块查找6. 哈希查找7. 树表查找 四种排序算法&#xff1a;1. 冒泡排序1.1 算法步骤1.2 动图演示1.3 代码示例 2. 选择排序2.1 算法步骤2.2 动图演示 3. 插入排序3.1 算…

基于ETLCloud的自定义规则调用第三方jar包实现繁体中文转为简体中文

背景 前面曾体验过通过零代码、可视化、拖拉拽的方式快速完成了从 MySQL 到 ClickHouse 的数据迁移&#xff0c;但是在实际生产环境&#xff0c;我们在迁移到目标库之前还需要做一些过滤和转换工作&#xff1b;比如&#xff0c;在诗词数据迁移后&#xff0c;发现原来 MySQL 中…

部署问题集合(二十二)Linux设置定时任务,并设置系统时间

前言 因为项目中经常用到定时任务&#xff0c;特此总结记录一下 步骤 大部分虚拟机创建后就自带定时服务&#xff0c;直接用命令就好编辑定时任务&#xff1a;crontab -e&#xff0c;在该文件下添加如下内容开机自启&#xff1a;reboot /home/autoRun.sh定时执行&#xff1a…

基于java+springboot+vue的交流互动系统-lw

​ 系统介绍&#xff1a; 随着现在网络的快速发展&#xff0c;网上管理系统也逐渐快速发展起来&#xff0c;网上管理模式很快融入到了许多企业的之中&#xff0c;随之就产生了“交流互动系统”&#xff0c;这样就让交流互动系统更加方便简单。 对于本交流互动系统的设计来说&a…

字节一面:你能讲一下跨域吗

前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;作为一名前端开发工程师&#xff0c;我们日常开发中与后端联调时一定会遇到跨域的问题&#xff0c;只有处理好了跨域才能够与后端交互完成需求&#xff0c;所以深入学习跨域…

STM32F103驱动oled显示屏

STM32F103驱动oled显示屏 一.了解oled显示屏二.IIC协议驱动oled显示屏2.1 oled.c2.2 oled.h 三.效果展示 一.了解oled显示屏 oled显示屏和其他显示屏类似&#xff0c;不过他只有0.96英寸&#xff0c;屏幕较小&#xff0c;但是使用起来比较方便。有二种驱动方式&#xff0c;分别…

Python学习笔记——从面试题出发学习Python

Python学习笔记——从面试题出发学习Python Python学习笔记——从面试题出发学习Python1. 可变数据类型与不可变数据类型&#xff0c;深拷贝与浅拷贝&#xff0c;函数参数的传递机制1.1 变量与对象1.2 可变数据类型与不可变数据类型1.3 深拷贝与浅拷贝1.4 函数参数的传递机制1.…

SIP对讲求助终端,带功放输出

SV-7011TP SIP对讲求助终端&#xff0c;带功放输出 一、描述 网络对讲终端SV-7011TP&#xff0c;SV-7011TP能处理tcp/ip网络音频流&#xff0c;并驱动扬声器进行播音的终端&#xff0c;主要用于公共数字广播&#xff0c;媒体教学&#xff0c;报警等需要数字音频的领域。 SV-…

LinearAlgebraMIT_12_Graph

x.1 用Incidence matrix关联矩阵表示图 矩阵将图的关系数学表达了出来&#xff0c;如下&#xff0c; x.2 图的性质 如果一个数据结构是图&#xff0c;则意味着其组成关联矩阵的向量组是线性相关的&#xff0c;如果数据结构是树则线性无关。 通过对图的了解&#xff0c;我们可…

激活函数总结(二十四):激活函数补充(SquaredReLU、ModReLU)

激活函数总结&#xff08;二十四&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 SquaredReLU激活函数2.2 ModReLU激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PReLU、Swish、ELU、SELU、GELU、Soft…

【iOS】折叠cell

文章目录 前言一、实现效果二、折叠cell的实现原理三、实现折叠cell的高度变化四、实现选中点击的单元格总结 前言 在暑假的3GShare中用到了折叠cell控件&#xff0c;特此总结博客记录 一、实现效果 二、折叠cell的实现原理 首先我们需要知道ScrollView的是TableView的父类&a…

c++11 标准模板(STL)(std::basic_ostringstream)(四)

定义于头文件 <sstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_ostringstream;(C11 前)template< class CharT, class Traits std::char_traits<CharT>, class Allocator std::allo…

Anaconda Prompt输入jupyter lab无反应

问题&#xff1a;Anaconda Prompt界面输入指令无反应 原因&#xff1a;公司电脑勒索病毒防御工具阻止了进程 解决&#xff1a;找到黑名单恢复进程

Modahub魔搭社区:星环向量数据库Transwarp Hippo团队的详细介绍

目录 团队概况 团队特色 团队实践 未来展望 团队概况 星环向量数据库团队,这是一个在星环内部颇具特色的团队。我们的特色在于,我们不仅专注于数据库领域,而且还涵盖了数据应用以及人工智能领域。这种跨领域的合作让我们能够提供更全面、更深入的服务。 我们团队的一个重…

Android Activity启动流程一:从Intent到Activity创建

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、概览二、应用内启动源码流程 (startActivity)2.1 startActivit…