1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：龙猫呗 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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进行状态管理，后续学习


参考官网的图
【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用,Vue,vue.js,vue,前端


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

【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用,Vue,vue.js,vue,前端


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）在使用的
【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用,Vue,vue.js,vue,前端


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_分发操作

【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用,Vue,vue.js,vue,前端


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、甚至是嵌套子模块
    【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用,Vue,vue.js,vue,前端

7.2_module的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用,Vue,vue.js,vue,前端


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，那么有如下的方式
【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用,Vue,vue.js,vue,前端

文章来源地址https://www.toymoban.com/news/detail-729765.html

到了这里，关于【Vuex状态管理】Vuex的基本使用；核心概念State、Getters、Mutations、Actions、Modules的基本使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue之vuex的getters详解

    vue之vuex的getters详解

    1.getters：类似是Vuex中的计算属性，也具有缓存功能：如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性，的值就不会发生改变 （1）例如state里有个list数据： （2）再gitters里通过filter方法过滤出需要的数

    2024年02月07日
    浏览(44)
  • 从定义到实际应用，详解项目管理的基本概念与核心内容

    从定义到实际应用，详解项目管理的基本概念与核心内容

    项目管理是项目的管理者，在有限的资源约束下，运用系统的观点、方法和理论，对项目涉及的全部工作进行有效地管理。项目管理的内容包括项目范围管理，是为了实现项目的目标，对项目的工作内容进行控制的管理过程。它包括范围的界定，范围的规划，范围的调整等。

    2024年02月08日
    浏览(60)
  • arkts状态管理使用（@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed）

    arkts状态管理使用（@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed）

    一、状态管理 1.在声明式UI中，是以状态驱动视图更新： ①状态（State）:指驱动视图更新的数据（被装饰器标记的变量） ②视图（View）:基于UI描述渲染得到用户界面 注意： ①@State装饰器标记的变量必须初始化，不能为空值 ②@State支持object、class、string、number、boolean、enum类

    2024年02月03日
    浏览(41)

  • vue3中状态管理库pinia的安装和使用方法介绍及和vuex的区别

    Pinia 与 Vuex 一样，是作为 Vue 的“状态存储库”，用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。 当该数据、方法在很多地方都需要

    2024年01月20日
    浏览(44)
  • Vue2向Vue3过度Vuex核心概念mutations

    Vue2向Vue3过度Vuex核心概念mutations

    1.定义mutations 2.格式说明 mutations是一个对象，对象中存放修改state的方法 3.组件中提交 mutations 4.练习 1.在mutations中定义个点击按钮进行 +5 的方法 2.在mutations中定义个点击按钮进行 改变title 的方法 3.在组件中调用mutations修改state中的值 5.总结 通过mutations修改state的步骤 1.定义

    2024年02月11日
    浏览(43)
  • vuex前端开发,getters是什么？怎么调用？简单的案例操作

    vuex前端开发,getters是什么？怎么调用？简单的案例操作

    vuex前端开发,getters是什么？怎么调用？简单的案例操作！ 下面通过一些简单的案例，来了解一下，vuex当中的getters到底是什么意思，有哪些实际的操作案例。 Vuex的getters主要用于对 store中的state进行计算或过滤 ，类似于Vue组件中的 计算属性 。它可以对state进行一些处理，然后

    2024年01月19日
    浏览(42)

  • 【状态管理｜概述】Flink的状态管理：为什么需要state、怎么保存state、对于state过大怎么处理

    按照数据的划分和扩张方式，Flink中大致分为2类： Keyed States：记录每个Key对应的状态值 因为一个任务的并行度有多少，就会有多少个子任务，当key的范围大于并行度时，就会出现一个subTask上可能包含多个Key（），但不同Task上不会出现相同的Key（解决了shuffle的问题？）   常

    2024年02月01日
    浏览(55)

  • Flink State 状态管理

    状态在Flink中叫做State，用来保存中间计算结果或者缓存数据。要做到比较好的状态管理，需要考虑以下几点内容： 状态数据的存储和访问 在Task内部，如何高效地保存状态数据和使用状态数据。 状态数据的备份和恢复 作业失败是无法避免的，那么就要考虑如何高效地将状态

    2024年01月17日
    浏览(44)
  • 状态设计模式（State Pattern）[论点:概念、相关角色、图示、示例代码、框架中的运用、适用场景]

    状态设计模式（State Pattern）[论点:概念、相关角色、图示、示例代码、框架中的运用、适用场景]

            状态模式 （State Pattern）是一种行为型设计模式，用于解决对象在不同状态下的行为问题。它允许一个对象在其内部状态改变时改变它的行为。状态模式主要包含三个部分： 上下文 （Context）、 状态接口 （State）和 具体状态实现类 （ConcreteState）。 状态接口（St

    2023年04月14日
    浏览(42)

  • vue：状态管理库及其部分原理（Vuex、Pinia）

    多组件的状态共享问题： 当多个组件需要访问和修改相同的数据时，我们需要在组件之间传递 props或者使用事件总线。当，应用就会变得难以维护和调试。 多组件状态同步问题： 当一个组件修改了状态，其他组件可能无法立即得知该变化。 状态变更的追踪问题： 无法追踪

    2024年01月19日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包