Vuex详解

一、什么是Vuex？为什么要用Vuex

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、Vuex在什么情况下使用

Vuex 可以帮助我们管理公共状态，并附带了更多的概念和框架。如果开发小型单页应用，使用 Vuex 可能是繁琐冗余的。如果开发的应用够简单，尽量不要使用 Vuex。但是，如果需要构建一个中大型单页应用，就会很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

三、Vuex的安装配置

1、npm 或 yarn安装

npm install vuex@next --save 
yarn add vuex@next --save 

2、如果在脚手架 创建项目时勾选vuex的选项系统会自动创建

  在store下面创建index.js,进行以下配置，在main.js引入

main.js 中

四、Vuex核心概念

Vuex中一共有五个状态 State  Getter  Mutation   Action   Module

 4.1 state 

公共数据源，所有公共的数据放到store的state进行储存，类似与data

 在state中定义数据，可以在任何组件中进行调用

在组件中使用

 方法一：.在标签中直接使用

 方法二：

this.$store.state.全局数据名称

方法三：.从vuex中按需导入mapstate函数

import { mapState } from "vuex";

 4.2 Mutation

更改 store 中的状态是提交 mutation。每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一

在组件中使用

方法一：

使用commit触发Mutation操作

 方法二：

 使用辅助函数进行操作

 4.3  Action 异步操作

Action和Mutation相似，Mutation 不能进行异步操作，Action可以进行异步操作

将减法改为异步操作

 在组件中使用

方法一：

使用dispatch触发Action函数

this.$store.dispatch("asyncReduce")

 方法二：

使用辅助函数

 4.4 Getter

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

 操作同上

4.5  Modules

开发大型项目时，数据量太大，Vuex就会显得很臃肿。为解决以上问题，Vuex 将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。