VueX 相关知识

爱听书的程序员阿超
135 阅读4分钟

记录学习 VueX 相关知识，侵权可删！ --2021年3月23日22:05:59

一、VueX是做什么的？

官方解释：VueX 是一个专为 Vue.js 应用程序开发的状态管理模式。

  • 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理是什么？

  • 可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
  • 然后，将这个对象放在顶层的 Vue 实例中，让其他组件可以使用。
Vuex就是为了提供这样一个在多个组件间共享状态的插件。

二、管理什么状态呢？

什么状态需要再多个组件间共享？

  • 大型开发，遇到多个状态，在多个界面间的共享问题。
  • 比如用户的登录状态、用户名称、头像、地理位置信息等等。
  • 比如商品的收藏、购物车的物品等等。
  • 这些状态信息，都可以放在统一的地方，对它进行保存和管理，它们还是响应式的。

三、Vuex 核心概念

1.State 相关使用

State 单一状态树

  • Vuex 使用了单一状态树来管理应用层级的全部状态

  • 只创建一个 store 对象（ 所有需要管理的信息都放在一个 store对象 ）

  • 单一状态树能够让我们以最直接的方式找到某个状态的片段，而且在日后的维护和调试过程中，也可以非常方便的管理和维护

2.Getters 基本使用

  • 需要从 store 中获取一些 state 变异后的状态，就可以用到 Getters。

Getters 作为参数和传递参数

3.Mutation 相关使用

3.1 Mutation 状态更新

Vuex 的 store 状态的更新唯一方式：提交 Mutation

Mutation 主要包括两部分：

  • 字符串的事件类型（type）
  • 一个回调函数（hander），该回调函数的第一个参数就是 state。

mutation 的定义方式：

mutations:{
    increment(state){
        state.count++
    }
}

通过 mutation 更新

increment:function(){
    this.$store.commit('increment')
}

3.2 Mutation 传递参数

在通过 mutation 更新参数的时候，可以携带一些额外的参数

  • 参数被称为是 mutation 的载荷（Payload）

Mutation 中的代码：

decrement(state,n){
    state.count -= n
}

decrement:function(){
    this.$store.commit('decrement',2)
}

如果参数不是一个呢？

  • 有很多参数需要传递
  • 通常会以对象的形式传递，也就是 payload 是一个对象
  • 再从对象中取出相关的信息
changeCount(state,payload){
    state.count = payload.count
}

changeCount:function(){
    this.$store.commit('changeCount',{count:0})
}

3.3 Mutation 提交风格

  • 普通方式的提交封装：通过 commit 进行提交

    this.$store.commit('incrementCount',count)

  • 特殊方式的提交封装：包含 type 属性的对象

this.$store.commit({
    type:'changeCount',
    count:100
})
  • Mutation 中的处理方式是将整个 commit 的对象作为 payload 使用，所以代码没有改变，依然如下：
changeCount(state, payload){
    state.count = payload.count
}

3.4 Mutation 响应规则

Vuex 的 store 中的 state 是响应式的，当 state 中的数据发生改变时，Vue 组件会自动更新。

必须遵守一些 Vuex 对应的规则：

  • 提前在 store 中初始化好所需的属性

  • 当给 state 中的对象添加新属性时，使用下面的方式：

    方式一：使用 Vue.set(obj,' newProp ',123)

    方式二：用新对象重新赋值

3.5 Mutation常量类型-概念

  • 在 mutation 中，定义了很多事件类型（其中的方法名称）
  • 项目增大时，Vuex管理的状态越来越多，需要更新状态的情况越来越多，意味着 Mutation 中的方法越来越多
  • 方法过多，使用者需要花费大量的精力去记住这些方法，甚至是多个文件来回切换，查看方法名称，还容易出现写错的情况

3.6 Mutation 同步函数

通常情况下，Vuex 要求我们 Mutation 中的方法必须是同步方法.

  • 主要原因是当我们使用 devtools 时，可以 devtools 可以帮助我们捕捉 mutation 的快照
  • 如果是异步操作，那么 devtools 将不能很好的追踪这个操作什么时候会被完成

通常情况下，不要在 mutation 中使用异步的操作。

4.Action 的基本定义

某些情况下，希望在 Vuex 中进行一些异步操作，比如网络请求，必然是异步的。

Action 类似于 Mutation，是用来代替 Mutation 进行异步操作的。

  • 有异步操作一定是在 Action 里面做的
  • Action 本身可以返回一个 Promise ，然后可以在另一个地方拿到 Promise，直接在后面写一个 then ，继续使用这个 Promise

5.module 使用详解

Module 是模块的意思，为什么在 Vuex 中我们要使用模块呢？

  • Vue使用单一状态树，意味着很多状态都会交给Vuex来管理.
  • 应用变得非常复杂的时候,store 对象就有可能变得相当臃肿.
  • 为了解决这个问题，Vuex 允许我们将 store 分割成模块（Module）,而每个模块拥有自己的 state、mutations、actions、getters 等

6.vuex-store 文件夹的目录

store
  • index.js # 组装模块并导出 store 的地方
  • actions.js # 根级别的 action
  • mutations.js # 根级别的 mutation
  • getters.js # 根级别的 getter
  • modules
    • moduleA.js # A模块
    • moduleB.js # B模块
avatar
文章
阅读
粉丝