vuex详解

目录

一、简介

二、优点

三、使用步骤

1. 安装Vuex

2. 引用Vuex

3. 创建仓库Store

四、包含模块

1. State

2. Getters

3. Mutations

4. Action

5. Modules

五、Vuex最最简单的项目实例

1. 存储数据

2. 获取数据

3. store文件目录结构

index.js

state.js

mutations.js

actions.js

getters.js

4. 使用store

我们来看看对 Vuex 比较专业的介绍：

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

简而言之，Vuex 采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。

Vuex状态管理跟使用传统全局变量的不同之处：

Vuex的状态存储是响应式的： 就是当你的组件使用到了这个 Vuex 的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

不能直接修改Vuex的状态： 如果是个全局对象变量，要修改很容易，但是在 Vuex 中不能这样做，想修改就得使用 Vuex 提供的唯一途径：显示地提交（<code>commint</code>）<code>mutations</code>来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

要使用 Vuex，我们要创建一个实例 <code>store</code>，我们称之为仓库，利用这个仓库 <code>store</code> 来对我们的状态进行管理。

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从 store 中获取数据，<code>mapGetters</code> 辅助函数仅仅是将 store 中的 <code>getter</code> 映射到局部计算属性。

Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

Action：用于提交 <code>mutation</code>，而不是直接变更状态，可以包含任意异步操作。

Module：可以将 store 分割成模块（module）。每个模块拥有自己的 <code>state</code>、<code>mutation</code>、<code>action</code>、<code>getter</code>、甚至是嵌套子模块

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

假设我们有一个全局状态 <code>count</code> 的值为 5。那么，我们就可以将其定义为 <code>state</code> 对象中的 <code>key</code> 和 <code>value</code>，作为全局状态供我们使用。如下：

可以认为，<code>getters</code> 是store的计算属性，类似于<code>computed</code>,对state里的数据进行一些过滤，改造等等

假设我们要在<code>state.count</code>的基础上派生出一个新的状态<code>newCount</code>出来，就适合使用我们的 <code>getters</code>

<code>getters</code> 接受 <code>state</code> 作为其第一个参数

在组件中获取 <code>{{newCount}}</code> 方式：

<code>Vuex</code> 给我们提供修改仓库 <code>store</code>中的状态的唯一办法就是通过提交<code>mutation</code> ，且必须是<code>同步函数</code>

我们在 <code>mutations</code>中定义了一个叫<code>increment</code>的函数，函数体就是我们要进行更改的地方

会接受 <code>state</code>作为第一个参数，第二个是自定义传参

我们在提交<code>commit</code>时候，第一个参数<code>"increment"</code>,就是对应在 <code>mutations</code>中的<code>increment</code>方法，第二个参数是自定义值。例如：

在组件中获取 <code>{{count}}</code> 方式：

用于提交 <code>mutation</code>，而不是直接变更状态，可以包含任意异步操作

只有通过 <code>action=&gt;mutations=&gt;states</code> ，这个流程进行操作，具体步骤如下：

然后我们就在组件里这么调用就可以了

随着项目的复杂度增大，为了方便管理 Vuex，一般会将其按功能分割成不同的模块(<code>Module</code>)，方便日后管理。每个模块拥有自己的 <code>state</code>、<code>mutation</code>、<code>action</code>、<code>getter</code> 甚至是嵌套子模块

<code>moduleA.js</code> / <code>moduleB.js</code> 文件

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。

运用vuex语法糖<code>mapMutations</code>和<code>mapGetters</code>

a.vue 文件

b.vue 文件

在 <code>main.js</code> 中引用