1.Vuex的概述

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

Vuex管理组件的好处：

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

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

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

一般情况下，只有共享的数据需要存储到vuex中，对于组件的私有数据，依旧存储在data中。

2.Vuex的基本使用

(1) 安装vuex的依赖包

npm install vuex --save

(2) 导入vuex包

import Vuex from 'vuex'

Vue.use(Vuex)

(3) 创建store对象

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

(4) 将store对象挂载到vue实例中

new Vue({

el: '#app',

render: h => h(app),

router,

// 将创建的共享数据对象，挂载到 Vue 实例中

// 所有的组件，就可以直接从 store 中获取全局的数据了

store

})

3.Vuex核心概念

（1）State

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

组件访问State数据的第一种方式：this.$store.state.全局数据名称；

组件访问State数据的第二种方式：import { mapState } from 'vuex';

computed: { ...mapState(['全局数据名称']) }

(2) Mutation

Mutation 用于变更 Store中的数据。

① 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据； ② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：

import { mapMutations } from 'vuex'

methods: {

...mapMutations(['名称',])

}

(3) Action

Action 用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

this.$store.dispatch() 是触发 actions 的第一种方式，触发 actions 的第二种方式：

import { mapActions } from 'vuex'

methods: {

...mapActions(['名称', ])

}

(4) Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。

① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。 ② Store 中数据发生变化，Getter 的数据也会跟着变化。

使用 getters 的第一种方式:this.$store.getters.名称

使用 getters 的第二种方式：

import { mapGetters } from 'vuex'

computed: {

...mapGetters(['名称'])

}

(5) Module

将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

Vuex