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

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

简介

说明

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

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

Vuex的五大核心概念

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

官网

State | Vuex

API 参考 | Vuex

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

有4个辅助函数

mapState (写在computed里面)mapGetters (写在computed里面)mapMutations (写在methods里面)mapActions (写在methods里面)

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

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

详解（有示例）

state

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

getters

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

mutations

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

actions

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

module

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