Vuex小白入门实践

Vuex入门

参考文档（官方文档）：https://vuex.vuejs.org/zh/。本人就是跟着此文档学习的理论基础，当中有很多代码小例子。
根据以上po出链接，认真把这个资料看完，Vuex就能大致了解并且写出一个小demo了。
接下来本人把学习过程大致记录一下，多多复习。

什么是Vuex

就是专门管理vue.js应用的状态管理模式。
首先记住这个图：
（网上大部分都是这张图，因为是官方文档中的）

图中重点为state、actions、mutations，被Vuex这个绿色的虚线框住的这一块。
Vuex是专门为Vue.js设计的状态管理库，以利用Vue.js的细粒度数据响应机制来进行高效的状态更新，接下来进行这些概念的重点讲解。。

Vuex中的核心概念

热心网友提供的资料：Vuex——核心概念和API：https://www.cnblogs.com/humiao-0626/p/11739333.html

1. state[唯一数据源(SSOT)]

基本数据，vuex状态管理的对象，它应该是唯一的。

2. getter

对数据获取之前的再次编译，可以理解为state的计算属性。
从基本数据派生的数据，借助vue的计算属性competed来实现缓存。

3. mutation

提交更改state的方法，是同步的。

4. action

像一个装饰器一样包裹mutation，使之可以异步，触发mutation方法

5. modules

模块化Vuex，当应用变得非常复杂时，store对象会变得臃肿

什么情况下使用Vuex？

vuex可以管理共享状态，附带了更多概念和框架。
创建一个中大型单页应用可以考虑使用Vuex进行状态管理。

使用Vue的步骤

第一步：安装Vuex

• NPM：npm install vuex --save
  使用之前必须进行安装vuex这一步骤。（加上- -save）
  本人使用的是NPM安装。

第二步：引入Vuex

• 在js中引用vuex（后面介绍引用的js具体是哪个）

  //注册vuex
  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);//使用vuex
  

第三步：了解Vuex的核心：store（仓库）

1. 在src目录下创建一个store目录。
   store目录下创建一个index.js
   

• 创建一个仓库

const store = new Vuex.Store({
    state,
    ...
    actions,
    modules: {
        ...
    }
});

第四步：注册到Vue实例中

new Vue({
  el: '#app',
  store,
  ...
  components: { App },
  template: '<App/>'
})

具体的可以看这篇博文，一篇很不错的博文，热心网友提供的Vuex详解：https://segmentfault.com/a/1190000015782272。

本人需要去修改开题报告了，保存一下搬运来的文章，热心网友还是很厉害的。