Vuex概述

之前学习过vuex，但是很久不做项目，用不到，再回想就忘记了，前端的东西太多了，免费现成的东西也多，但是你看了一遍，懂了不代表你就会了，不用就又会忘记，

我记性不好，现在开始就学习了的在自己总结写下来，转述一遍，内化成自己的东西，虽然速度慢，收获应该更多。

1、Vuex概述

1.1组件之间共享数据的方式

父向子传值：v-bind属性绑定

子向父传值：v-on事件绑定

兄弟组件之间共享数据：EventBus

$on 接收数据的那么组件

$emit 发送数据的那个组件

1.2 Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

Vuex它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。他可以方便实现组件之间的数据共享

1.3使用vuex统一管理状态的好处

 1、能够在vue中集中管理共享的数据，易于开发和后期维护

 2、能够高效的实现组件之间数据的共享提高开发效率

 3、存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

1.4什么样的数据适合存储到Vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中即可

2、vuex的基本使用

2.1、安装vuex依赖包

npm install vuex --save

2.2、导入vuex包

import Vuex from ‘vuex’

Vue.use(Vuex)

2.3、创建store对象

const store=new Vuex.Store({

    state:{count:0)

})

2.4、将store对象挂载到vue实例中

new Vue({

    el: '#app',

    render: h => h(app),

     router, // 将创建的共享数据对象，挂载到Vue实例中 // 所有的组件，就可以直接从store中获取全局的数据了 store

})

3、Vuex的核心概念

3.1 State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储

const store = new Vue.Store({

        state: {

             count: 0 }

             ...

   })

组件访问State中数据的第一种方式

this.$store.state.全局数据名字

在html元素组件之间调用，则可以省略this，即：

<span>{{$store.state.全局数据名称}}</span>

组件访问State中数据的第二种方式

通过mapState辅助函数方式，实现组件访问State中数据的第二种方式

// 1. 从vuex中按需导入mapState函数 import { mapState } from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前的computed计算属性：

// 2. 将全局数据映射为当前组件的计算属性

computed: {

// ...表示展开映射，意思就是将全局属性映射为当前组件的计算属性

...mapState(['count'])

}

直接在调用获取组件属性

<span>{{count}}</span>