Vuex基础

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

npm install vuex@next 安装  

import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    // state中存放的就是全局共享数据 
    state:{     
    count: 0 
    } 
})

//挂载store对象
new Vue({ 
    el: '#app', 
    render: h=>h(app)m 
    router, 
    //将创建的共享数据对象,挂载到Vue实例中
    //所有的组件，就可以直接从store中获取全局的数据了
    store 
})

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

利用Vuex我们可以将组件之间共享的数据抽取出来，单独存放在一个store（仓库）中去，这样各个组件需要数据的时候直接去仓库里面拿就好了，不用组件之间复杂的传值了，而且需要改变数据的时候，只需要将仓库里面的数据更改即可，各个组件里面引用的地方会自动更新。

用于Vue组件

dispatch 含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)

commit     this.$store.commit(‘mutations方法名’,值)

mapState

mapGetters

mapActions

左边是我们的组件，可以简单理解为我们的视图，虚线框则是我们的vuex，这里面有一个State，可以把它理解为数据。以前我们将数据放在组件里面，要修改数据直接在组件里面修改就好了，现在数据放在了vuex仓库里面，我们要修改数据就得走一定的流程：

• 我们需要在我们组件里面调用dispatch()方法提交Actions（还记得最开始我们如何说的Actions吗？）

• Actions再通过Commit()方法提交Mutations（简单理解为真正的修改数据的方法）

• 通过Mutations里面的方法改变state（数据）

• 响应（渲染）到组件里面。

Vuex的核心概念