首页 > 其他分享 >Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。

Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。

时间：2022-12-30 18:34:00浏览次数：52  
标签：代码 getters mutations Mutations state js Vuex store


文章目录

  • ​​前言​​
  • ​​一、State单一状态树​​
  • ​​二、Getters基本使用​​
  • ​​1. 描述和案例​​
  • ​​2. 案例代码​​
  • ​​三、Mutations​​
  • ​​1. Mutations状态更新​​
  • ​​2. Mutations传递参数​​
  • ​​i、概念​​
  • ​​ii、代码示例​​
  • ​​3. Mutations提交风格​​
  • ​​4. Mutations响应规则​​
  • ​​i、概念​​
  • ​​ii、代码案例​​
  • ​​5. Mutations常量类型​​
  • ​​i、概念​​
  • ​​ii、代码示例​​
  • ​​6. Mutations同步函数​​
  • ​​四、Action的基本定义​​
  • ​​1. 概念​​
  • ​​2. 代码示例​​
  • ​​五、modules​​
  • ​​1. 描述​​
  • ​​2. Modules局部状态​​
  • ​​3. Actions的写法​​
  • ​​4. 代码示例​​
  • ​​六、对象的解构：对象小技巧​​
  • ​​七、项目结构抽取​​
  • ​​八、总结​​

前言

一、State单一状态树

  • Vuex提出使用单一状态树, 什么是单一状态树呢？
    英文名称是Single Source of Truth，也可以翻译成单一数据源。
  • 但是，它是什么呢？我们来看一个生活中的例子。
  1. OK，我用一个生活中的例子做一个简单的类比。
  2. 我们知道，在国内我们有很多的信息需要被记录，比如上学时的个人档案，工作后的社保记录，公积金记录，结婚后的婚姻信息，以及其他相关的户口、医疗、文凭、房产记录等等（还有很多信息）。
  3. 这些信息被分散在很多地方进行管理，有一天你需要办某个业务时(比如入户某个城市)，你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息，最后到一个地方提交证明你的信息无误。
  4. 这种保存信息的方案，不仅仅低效，而且不方便管理，以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护，当然国家目前已经在完善我们的这个系统了)。
  • 这个和我们在应用开发中比较类似：
  1. 如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难。
  2. 所以Vuex也使用了单一状态树来管理应用层级的全部状态。
  3. 单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。
  • 说白了 建一个 store 就行，

二、Getters基本使用

1. 描述和案例

​​getters​​​ 类似于 ​​vue​​​ 的 ​​computed​​ 有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中：

  1. 返回 counter 的平方
  2. 获取学生年龄大于20的个数。
  3. 学生年龄大于20 的长度
  4. 传入自定义年龄 ，返回大于传入年龄的 数据

我们可以在Store中定义getters

2. 案例代码

  2. ​​app.vue​​

    3. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_js

  4. ​​store/index.js​​

    5. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_02

  6. ​​HelloVuex.vue​​

    7. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_Vue_03

  8. ​​效果​​

    9. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_04

三、Mutations

1. Mutations状态更新

  • Vuex的store状态的更新唯一方式：​​提交Mutation​​
  • Mutation主要包括两部分：
  1. 字符串的 ​​事件类型（type）​​
  2. 一个 ​​回调函数（handler）​​,该回调函数的第一个参数就是state。
  • ​​mutation的定义方式：(在store/index.js)​​

    • Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_05

  • ​​通过mutation更新(app.vue/methods)​​

    • Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_异步操作_06

2. Mutations传递参数

i、概念

  • 在通过 ​​mutations​​ 更新数据的时候, 有可能我们希望携带一些额外的参数
    ​​​参数被称为是mutations的载荷(Payload)​​
  • 但是如果参数不是一个呢?
  1. 比如我们有很多参数需要传递.
  2. 这个时候, 我们通常会以对象的形式传递, 也就是 ​​payload​​
  3. 这个时候可以再从对象中取出相关的信息。

ii、代码示例

  2. ​​app.vue​​

    3. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_js_07


    4. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_异步操作_08

  5. ​​store/index.js​​

    6. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_09

  7. ​​效果​​

    8. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_Vue_10

3. Mutations提交风格

  • 其实上面2.2.2的代码案例中，已经写出了两种提交风格，我这里截图对比一下即可：
  • Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变

4. Mutations响应规则

i、概念

  • ​​响应式​​：界面和数据同时改变。
  • Vuex的 store 中的 ​​state​​ 是响应式的, 当 state中的数据发生改变时, Vue组件会自动更新.
  • 这就要求我们必须遵守一些Vuex对应的规则:
  1. 提前在store中初始化好所需的属性.
  2. 当给state中的对象添加新属性时, 使用下面的方式:
    方式一: 使用Vue.set(obj, ‘newProp’, 123)
    方式二: 用新对象给旧对象重新赋值
  • 我们来看一个例子:
    当我们点击更新信息时, 界面并没有发生对应改变.
  • 如何才能让它改变呢?
  1. 查看下面代码的方式一和方式二
  2. 都可以让state中的属性是响应式的.

ii、代码案例

  2. ​​app.vue​​

    3. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_js_11


  5. ​​store/index.js​​ 认真看注释，很清晰，很清楚

    6. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_异步操作_12


  8. 效果

    9. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_异步操作_13


5. Mutations常量类型

i、概念

  • 我们来考虑下面的问题:
  1. 在mutation中, 我们定义了很多事件类型(也就是其中的方法名称).
  2. 当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多.
  3. 方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.
  • 如何避免上述的问题呢?
  1. 在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型.
  2. 我们可以将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然.
  • 具体怎么做呢?
  1. 我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.
  2. 定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称.

ii、代码示例

其实就是将 ​​app.vue​​ 中的 ​​commit​​ 的方法字符串，写成常量，单独放到一个js文件，​​在 vuex 的store/index.js​​ 中的 ​​mutations​​ 的方法也改成刚才的常量，这样就不会出现名称对不上而出现的问题。

  2. 在store下新建文件：​​mutations-types.js​​

    3. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_Vue_14


  5. ​​app.vue​​

    6. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_异步操作_15


  8. ​​store/index.js​​

    9. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_16


  10. 效果正常显示。

6. Mutations同步函数

  • 通常情况下, Vuex要求我们Mutation中的方法必须是同步方法.
  1. 主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照.
  2. 但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成.
  • 比如我们之前的代码, 当执行更新时, devtools中会有如下信息:

    • Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_17

  • 但是, 如果Vuex中 ​​mutations​​ 的代码, 我们使用了异步函数:如下截图所示

    • Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_18


    • Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_异步操作_19

  • 你会发现state中的info数据一直没有被改变, 因为他无法追踪到. 其实已经改变了，只不过无法监控到

  • So, 通常情况下, 不要再mutation中进行异步的操作

四、Action的基本定义

1. 概念

  • 我们强调, 不要再Mutation中进行异步操作.
  1. 但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
  2. Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
  • Action的基本使用代码如下:
  • context是什么?
  1. context是和store对象具有相同方法和属性的对象.
  2. 也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
  3. 但是注意, 这里它们并不是同一个对象, 为什么呢? 我们后面学习Modules的时候, 再具体说.
  • 这样的代码是否多此一举呢?
  1. 我们定义了actions, 然后又在actions中去进行commit, 这不是脱裤放屁吗?
  2. 事实上并不是这样, 如果在Vuex中有异步操作, 那么我们就可以在actions中完成了.
  • 在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch，同样的, 也是支持传递payload

2. 代码示例

还是以修改用户信息为例：​​只修改 app.vue​​ 中的 ​​updateStudent​​ 方法和 ​​只添加 store/index.js​​ 中 ​​actions​​ 方法即可。

  2. ​​app.vue​​

    3. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_20

  4. ​​store/index.js​​

    5. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_js_21

  6. 效果

    7. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_22

五、modules

1. 描述

  • Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
  1. Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
  2. 当应用变得非常复杂时,store对象就有可能变得相当臃肿.
  3. 为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等。
  • 我们按照什么样的方式来组织模块呢?
    我们来看下边的代码

    • Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_23


2. Modules局部状态

  • 上面的代码中, 我们已经有了整体的组织结构, 下面我们来看看具体的局部模块中的代码如何书写.
  1. 我们在moduleA中添加​​state、mutations、getters​​。
  3. ​​mutations 和 getters​​接收的第一个参数是 ​​局部状态对象​​ 。

    4. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_24


    5. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_25


  • 注意:
  1. 虽然, 我们的doubleCount和increment都是定义在对象内部的.
  2. 但是在调用的时候, 依然是通过this.$store来直接调用的.

3. Actions的写法

actions的写法呢? 接收一个context参数对象
局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState


Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_26

如果getters中也需要使用全局的状态, 可以接受更多的参数

Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_异步操作_27

4. 代码示例

  2. ​​app.vue​​

    3. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_Vue_28

  4. ​​store/index.js​​

    5. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_Vue_29


    6. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_30

  7. 效果

    8. Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_Vue_31

六、对象的解构：对象小技巧


Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_代码示例_32

七、项目结构抽取

写完上面的代码时，​​store/index.js​​ 已经有了200多行代码了，这里需要将 ​​mutations、getters、actions、module​​进行抽取出来；state 就不用抽取了，便于方面查看。

Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。_vue_33


这样就清洗多啦

八、总结

到此 vuex 可以说就学习完了。
书山有路勤为径，学海无涯苦作舟
加油，为了未来更好的生活。




标签：代码,getters,mutations,Mutations,state,js,Vuex,store
From： https://blog.51cto.com/u_15926676/5981148

相关文章

  • Vuex的简单使用，基于Vue2
    模仿他的，项目地址https://github.com/iamshaunjp/vuex-playlist视频地址https://www.youtube.com/watch?v=BGAu__J4xoc&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index......
  • 一文理解vuex和pinia的区别
    一文理解vuex和pinia的区别......
  • vue3中使用vuex
    一、使用习惯1（模块化）：1、文件目录：2、userStore.tsimport{Module}from'vuex';//import{setStorage,getStorage}from"../../util/common";exportdefault{......
  • VueX基础篇
    1.VueX是什么：“Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。”......
  • CF213E Two Permutations
    好久没有交流题目了啊，回来补一下之前的哈。题目要使 $a_1+x$,$a_2+x$,$\cdots$,$a_n+x$是$b$序列的子序列。这里最烦的部分应该就是子序列是不连续的。注意到$a$序列......
  • Vuex
    简介​  在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。......
  • vuex的使用
    1，vuex是什么：vuex是一个专门为vue开发的状态管理工具，它采用集中式存储管理应用的所有组件的状态，其核心是state。2，vuex中有什么：1）state：存放状态数据的地方，其中数据是响应式......
  • Vuex从入门到精通
    一、vuex介绍目标什么是Vuex为什么学习Vuex通信方案组件关系数据通信父子关系父传子：props；子传父：$emit非父子关系vuex(一种组件通信方案)Vuex......
  • vuex辅助函数使用
    辅助函数的认识：vuex的辅助函数有4个：mapState,mapGetters,mapMutations,mapActions辅助函数的写法：1、在页面引入import{mapState,mapGetters,mapMutatio......
  • Vue刷新vuex数据丢失
    安装依赖npminstallvuex-persistedstate使用importVuefrom'vue'importVuexfrom'vuex'importcreatePersistedStatefrom'vuex-persistedstate'Vue.use(Vuex)export......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99