Vue--Vuex--五大核心概念--详解/实例

缺乏、安全感 2023-10-01 16:17 24阅读 0赞

原文网址：[Vue--Vuex--五大核心概念--详解/实例\_IT利刃出鞘的博客-CSDN博客][Vue--Vuex--_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍Vuex的用法。包括：Vuex的五大核心概念、Vuex的用法。

也可以将五大核心概念称为：五大属性。

**Vuex的五大核心概念**

1.  state：存放状态（变量）
2.  getters：vuex的计算属性
3.  mutations：唯一可以改变state数据的工具
4.  actions：异步操作，通过mutations来改变state。它不能直接改变state里的数据。
5.  module：模块化

**官网**

[State | Vuex][State _ Vuex]

[API 参考 | Vuex][API _ _ Vuex]

## 五大核心概念概述 ##

1.  state：存放状态（变量）
    
    1.  state存放的数据是响应式的：如果store的数据改变，依赖这个数据的组件也会更新。
2.  getters：vuex的计算属性
    
    1.  getters 是Store的计算属性，可以对State进行计算操作。
    2.  虽然组件内也可以做计算属性，但getters 可以在多组件之间复用。
    3.  如果一个状态只在一个组件内使用，可以不用getters。
3.  mutations：唯一可以改变state数据的工具
    
    1.  有多个对象，里边包含多个直接更新 state 的方法(回调函数)
    2.  触发方式: action 中的 commit(‘mutation 名称’)
    3.  只能包含同步代码, 不能写异步代码。
4.  actions：异步操作，通过mutations来改变state。
    
    1.  不能直接改变state里的数据。
    2.  包含多个事件回调函数的对象
    3.  执行方式：通过执行 commit()来触发 mutation 的调用, 间接更新 state
    4.  触发方式: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’
    5.  可以包含异步代码(例如：定时器, 请求后端接口)
5.  module：模块化
    
    1.  项目庞大、状态很多时，可以采用模块化管理模式。
    2.  Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块（从上至下进行同样方式的分割）

**有4个辅助函数**

1.  mapState (写在computed里面)
2.  mapGetters (写在computed里面)
3.  mapMutations (写在methods里面)
4.  mapActions (写在methods里面)

怎么记应该写到computed还是methods里边呢？

很简单，读放在computed中，写放在methods中。state和getter都是读，mutation和action都是写。

## 详解（有示例） ##

**state**

见：[Vuex--state--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vuex--state--_IT_-CSDN]

**getters**

见：[Vuex--getters--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vuex--getters--_IT_-CSDN]

**mutations**

见：[Vuex--mutations--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vuex--mutations--_IT_-CSDN]

**actions**

见：[Vuex--actions--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vuex--actions--_IT_-CSDN]

**module**

见：[Vuex--module(模块化)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vuex--module_--_IT_-CSDN]

[Vue--Vuex--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122658113
[State _ Vuex]: https://vuex.vuejs.org/zh/guide/state.html
[API _ _ Vuex]: https://vuex.vuejs.org/zh/api/#vuex-store-%E6%9E%84%E9%80%A0%E5%99%A8%E9%80%89%E9%A1%B9
[Vuex--state--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122724051
[Vuex--getters--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122724236
[Vuex--mutations--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122724368
[Vuex--actions--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122725144
[Vuex--module_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122733155