Vue中的vuex介绍与使用（通俗版）_vuex中的countalias

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，单一状态树,通俗理解就是一个应用的数据集合，可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作。详情官方解释。

Vuex的组成

Vuex分成五个部分：

1. State：单一状态树
2. Getters：状态获取
3. Mutations：触发同步事件
4. Actions：提交mutation，可以包含异步操作
5. Module：将vuex进行分模块

前四个特征就是核心。

正如官网vuex图示，Vuex的数据总是“单向流动”

• 用户访问页面并触发action
• action提交mutation事件
• mutation事件更改state状态
• state状态改变后更新页面(vue comptents)

Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action。

用法

从左到右，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。

注意事项

• 数据流都是单向的
• 组件能够调用 action
• action 用来派发 Mutation
• 只有 mutation 可以改变状态
• store 是响应式的，无论 state 什么时候更新，组件都将同步更新

方式

方式一：可以将state，getter，mutation，action写到一个store.js文件中可以参考
方式二：在src目录下我们创一个vuex文件夹，分别创建index.js,mutations.js,state.js,getters.js,actions.js可以参考

这里以方式一进行实例

State
在 store 中的 state 对象，可以理解为 Vue 实例中的 data 对象，它用来保存最基本的数据。

import Vue from 'Vue';
import Vuex f
1