浅谈vuex

各位，本期是根据我的开发经验和在逆战班的学习总结出的vuex使用技巧，接下来，让我们一起学习 vuex:

介绍：

Vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是单向数据流。下图就是Vuex实现单向数据流的示意图。

首先，安装 :
Vue项目中使用 npm 下载安装（需要安装 Node 环境）
npm install vuex --save
// 安装使用
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)

接下来，我们将会更深入地探讨一些核心概念。让我们先从Store概念开始。

Store

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。
安装 Vuex 之后，让我们来创建一个最简单的 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

State

Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 会暴露为 store.getters 对象：

Mutation

Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，payload作为第二个参数（额外的参数）：

一条重要的原则就是要记住 mutation 必须是同步函数。

Action

Action 类似于 mutation，不同在于：

1.Action 提交的是 mutation，而不是直接变更状态。
2.Action 可以包含任意异步操作。

接下来注册一个简单的 action：

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
我们可以在 action 内部执行异步操作：

#在vue中使用vuex:
在store中的index.js中引入vuex并配置如下，在modules中引入子文件

在main中引入store

在vue文件中使用vuex
1.从vuex中引入相关状态

2.按照相应路径取出对应属性


在html中属性可以直接使用,如果要在js中使用属性,属性前面加this

对于发送ajax请求:
在对应的module中配置好方法

在vue文件中直接调用全局方法：

好了，各位小伙伴，本期的分享就到这了
作者：赵亚华