Vuex是什么？如何理解和应用？

对于使用vuex的理解是什么？

由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。
但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。
因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是乎 Vuex 就应运而生了。

vuex的使用场景

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车vuex是一种集中式状态管理模式，它按照一定的规则管理状态，保证状态的变化是可预测的。

Vuex是什么？

vuex是专门为vue.js设计的状态管理模式，它采用集中式存储管理vue应用中所有组件的状态。核心就是store（仓库），存储东西。
Vuex可以理解为一种开发模式或框架，通过状态集中管理驱动组件的变化，应用级的状态集中放在store中，改变状态的方式是提交mutations,异步逻辑封装在action中。Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。

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

1、能够在 vuex 中集中管理共享的数据，利于开发和后期的维护；
2、能够高效的实现组件之间的数据共享，提高开发效率；
3、存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步；

vuex还可以解决组件之间的通讯问题，和所有组件都可以交互

什么样的数据适合存储在vuex中？

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

在vue中如何使用vuex？

1、安装vuex的依赖项：

npm install vuex --save

2、导入vuex包：

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

3、创建store对象：

以下代码中定义了vuex的5个核心属性

const store = new Vue.store({
    //存放全局共享的变量，定义初始化状态，就是vuex中的基本数据
    state:{
         todos: [
      		{ id: 1, text: '...', done: true },
      		{ id: 2, text: '...', done: false }
    	]
    },
    //设置状态，mutations:更改 Store 中的数据
    mutations:{
        increment(state){
            //变更状态
            state.count++;
        }
    },
    //异步提交mutations,actions提交的是mutation，而不是直接变更状态，action可以包含任意异步操作
    actions:{
        increment(context){
            setInterval(function(){
                context.commit('increment')
            },1000)
        }
    },
    //获取状态：即从store的state中派生出的状态。getters接收state作为第一个参数，接受其他getters作为第二个参数，如不需要，第二个参数可以省略
    getters:{
    	doneTodos: state => {
      	return state.todos.filter(todo => todo.done)
    },
    //把状态管理模块化，各自的组件构成各自的模块
    modules:{
        dict,
        home
    }
})

4、将store对象挂载到Vue实例中

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

5、在Vue组件中获得Vuex属性

const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

用于vue组件的API

//action 通过 store.dispatch 方法触发
dispatch
//提交mutations，store.commit('increment', 10)
commit
//为组件创建计算属性以返回 Vuex store 中的状态(解决一个组件需要获取多个状态的问题)
mapState
//仅仅是将 store 中的 getter 映射到局部计算属性
mapGetters
//将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store），也可以组件中使用 this.$store.dispatch('xxx') 分发 action
mapActions
//将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）,也可以在组件中使用 this.$store.commit('xxx') 提交 mutation
mapMutations