1.安装Vuex
npm install vuex --save (简略版： npm i vuex -S)
2.创建
在src目录下创建文件夹store，接着创建store.js文件，文件内容如下
3.注入
在main.js中注入vuex，内容如下
引入store
注入到根实例中（实例化store）
以上步骤是基本操作，
4.理解vuex
vuex应用的核心是 store（仓库）。
个人理解：store是一个共享仓库，哪个组件需要，直接引入使用即可。
Vuex 和单纯的全局对象有以下两点不同：
1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。（这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。）
一、State --- 单一状态树
个人理解：把需要共享的数据放在state中（感觉和vue组件中data差不多）
因为我们在根实例中注册了store，该store实例 会注入到根组件下的所有子组件中。所有我们可以在子组件中通过this.$store使用。
1.在vue组件中获取vuex的状态
读取状态（可以在组件的计算属性computed中返回某个状态）
store中
组件中
二、Mutations（更改Vuex的store中的状态的唯一方法就是提交mutation）
个人理解：（感觉和vue组件中methods差不多）
一条重要的原则就是要记住 mutation 必须是同步函数。
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 ①事件类型 (type) 和 一个 ②回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
② 第二个参数传对象，容易控制
② 提交 mutation 的另一种方式是直接使用包含 type 属性的对象
① num为参数对象的名字
你不能直接调用一个 mutation 回调函数（handler）。这个选项更像是事件注册：“当触发一个类型为 changea 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。
三、Action （Action 可以包含任意异步操作。）
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。
让我们来注册一个简单的 action：
Action 通过 $store.dispatch 方法触发（Actions 支持同样的载荷方式进行分发）
Action 函数接受一个与 store 实例具有相同方法和属性的 store对象(图中store参数)，因此你可以调用 store.commit 提交一个 mutation。也可以通过 store.state 和 store.getters 来获取 state 和 getters。
常用的简化版写法：
Actions 支持同样的对象方式进行分发
实践中，我们会经常用到 ES6 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）
四、Getter（可以认为是 store 的计算属性）
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。（vue中的计算属性为computed）
Getter 接受 state 作为其第一个参数
返回值随state.a的变化而变化
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值
五、Module
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
网友评论