可能这是最容易理解Vuex概念的文章了(通俗易懂详细版 )_vuex": "^3.0.1" 表示什么

刚开始学vue的时候，看到很多项目都有用vuex，抱着一种好奇的心态去看下vuex的官方文档,如下:

Vuex官方文档  

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

     。。。一看晕了，官方的文档果然是用官方的语言，让我们这些平民百姓小渣渣看得一脸懵逼,于是这篇文章呼之欲出。

 

每一个 Vuex 应用的核心就是 store（仓库）。

“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

 仓库是用来干嘛的，顾名思义仓库就是存储某些东西的，需要就从里面拿取出来。哦，那么我们就可以先理解为vuex是帮我们存储数据的。

一说到存储数据，我们会想到哪里可以存储数据?  变量、数组、cookie、localstorage、session等等 。那么store和这些有什么区别呢?我们先来看下store长什么样子

const store = new Vuex.Store({
    state:{
        count: 2
    }
})

我们可以看到store对象里面包含了state,而state也是一个对象，所以"store”基本上就是一个容器。仔细一看，这个store就是用来存储数据而已，那么我们就会产生一个疑问，store和全局变量到底有什么区别呢？借用文档的话

Vuex 和单纯的全局对象有以下两点不同：

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

好了，现在我们可以这样理解store：Vue的核心是组件，那么组件之间怎么进行通信呢？我们第一时间会想到父子组件之间的通信props和$emit，那非父子关系的组件怎么通信呢？当然办法还是有的，或许你会想到事件传参或者多层嵌套，但是这样就是使得代码臃肿并且难以维护。

因此Vuex应运而生，把组件共享状态抽取出来，以一个全局单例模式管理。另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

简单来说，就是把组件需要共享的数据抽取出来，交给store来处理

此外,store是内存机制，而不是缓存机制，当前页面一旦刷新或者通过路由跳转亦或是关闭，都会导致store初始化。因此在之前就暂时把store看成一个多功能的全局变量.

那么store一般保存的是什么数据呢？

       1.组件的初始数据          2.后台返回来的初始数据

现在相信大家对Vuex有了初步的了解，那么我们来进一步了解Vuex的核心概念,分别是

State、  Getter、  Mutation、  Action、  Module

为了方便我们了解Vuex的核心概念，我们需要动手实践.

我们一般是使用vue-cli搭建项目的，首先我们现在src目录下新建一个名为“store”的文件夹,然后在store目录下新建名为“index.js”文件。

那我们先引入vuex    npm install vuex --save    

通过package.json我们可以看到安装vuex是否成功引进

"dependencies": {
    "element-ui": "^2.4.5",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
},

接下来就分别需要在store->index.js和main.js分别配置

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)    //在创建Vue实例之前
 
const store = new Vuex.Store({
    state:{
        count: 2
    }
})
 
export default store

//main.js
import store from './store'
 
new Vue({
  el: '#app',
  router,
  store,               //通过在根实例中注册 store 选项
  render: h => h(App)  //vue2.0的写法
})

好了，现在我们已经配置好了基本环境,开始实战了。

我们需要vue文件来实验，那么我在components下新建Test.vue文件,写入如下内容

// components/Test.vue
<template>
  <div>
    {{count}}    //2
  </div>
</template>
 
<script>
   export default{
     computed:{
	    count(){
		  return this.$store.state.count
		}
	  }
   }
</script>

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性computed中返回某个状态

通过在根实例中注册 store 选项（main.js），该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

因此我们可以看到页面显示的是结果是2

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

// components/Test.vue
<template>
  <div>
    {{count}}    //2
  </div>
</template>
 
<script>
   // 在单独构建的版本中辅助函数为 Vuex.mapState
   import { mapState } from 'vuex'
   export default{
     computed:{
	...mapState({
	// 使用对象展开运算符将此对象混入到外部对象中
        // 第一种：箭头函数可使代码更简练
    	   count: state => state.count
        //第二种: 传字符串参数 
           count: 'count'
       })
     },
   }
</script>

因为这里要提一下箭头函数使用的坑，所以先提前使用到getters。接下来把store/index.js和Test.vue修改一下

//  store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)//在创建Vue实例之前
 
const store = new Vuex.Store({
    state:{
        //存放组件之间共享的数据
        count: 2,
        other: 5,
    },
    getters:{
        //过滤state数据,function处理
        filter : state => state.count ? 1 : 0
    }
})
 
export default store

//Test.vue
 
<template>
  <div>
    {{count}} ..{{num}} ..{{other}}   // 2 ..1 ..5
  </div>
</template>
 
<script>
    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import { mapState } from 'vuex'
 
    export default{
        computed:{
            count(){
                return this.$store.state.count
            },
            num(){
                return this.$store.getters.filter
            },
            ...mapState({
                // 使用对象展开运算符将此对象混入到外部对象中	 
                // 第一种：箭头函数可使代码更简练
                other: state => state.other
    			
                // 第二种: 传字符串参数 
                other: 'other'
 
                // 这里如果想得到num的值,是不能用state.num,因为没在state里定义
                // 那么如果用箭头函数的话也不可以，因为箭头函数改变了this的指向
                // 为了能够使用 `this` 获取局部状态，必须使用常规函数
                other(){
                     return this.num
                }
            })
        }
    }
</script>
 

先说到这里，有时间会再更新的