一、Vuex 的概念及安装使用

Vuex 是什么?

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式库
• 采用集中式存储管理应用的所有组件的状态，并以响应的规则，保证状态以一种可预测的方式发生变化
• 可以使用 devtools 调试工具进行调试
• Vuex 借鉴了 Flux、Redux的思想

Vuex 中的状态存储是响应式的; 当 Vue 组件从 store 中读取状态的时候, 若 store 中的状态发生了变化, 那么相应的组件也会得到高效更新.
不能直接修改 store 中的状态, 改变 store 的状态的唯一方式是提交（commit） 一个 mutation, 使得我们可以方便地跟踪每一个状态的变化

单向数据流理念
单向数据流方式使用一个上传数据流和一个下传数据流进行双向数据通信, 两个数据流之间相互独立。单向数据流指: 只能从一个方向来修改状态。

Vuex 的五大核心概念

• state: 应用的数据源, 即状态, 单一状态树
• getter: 经过依赖处理的数据, 返回值会根据依赖被缓存起来, 只有当依赖发生改变才会被重新计算
• mutation: 更改store中的状态的唯一方式是提交 mutation, 必须是同步的, 使用 store.commit 提交;
• action: 异步操作, 通过 store.dispatch 方法触发 action, 然后再提交 mutation, 而不是直接变更状态
• module: 将 store 分割成模块(module), 每个模块拥有自己的state、getter、mutation、action实现应用中业务模块数据的单独管理

Vuex 使用步骤

第一步:
安装 Vuex
npm install vuex --save 或 yarn add vuex

第二步:
在 src 文件夹下新建 store 文件夹, 以 index.js 为 vuex 的入口文件

// 1. 引入vuex及依赖文件Vue
import Vue from 'vue'
import Vuex from 'vuex'
// 2. 使用 Vuex 插件
Vue.use(Vuex);

// 初始化 状态数据
const state = {};
// 实时监听 state 的变化, 提供处理后的数据
const getters = {};
// 定义更改 state 状态的方法
const mutations = {};
// 异步操作方法
const actions = {};

// 3. 创建 store 仓库
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

// 4. 向外提供实例化的 store 对象, 用于注入整个应用
export default store;

第三步:
把创建好的 store仓库, 注入到 Vue 根实例对象中

import store from './store';

new Vue({
    render: h => h(App),
    store
}).$mount('#app');
// 注意: 
// 现在就可以在每个组件中获取到 store 中的状态了

在组件中获取状态 和 提交修改状态方法

// 在组件中获取状态
this.$store.state   
this.$store.getters

// 提交修改状态的方法
// 通过 commit 提交同步操作的 mutation 方法
this.$store.commit("mutation中的方法名", payload);
// 通过 dispatch 派发 action 异步操作, action 内部 commit 提交 mutation 来修改状态
this.$store.dispatch("action中的方法名")