Vuex

一、vuex是什么

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、vuex的工作流程

        1、vue组件 -> Dispatch派发 -> action

        2、action -> commit提交 -> mutation

        3、mutation -> mutate修改 -> state

        4、state -> render渲染 -> vue组件

三、vuex组成文件（import 引入）

        state

        actions

        mutations

        getters

        ActionType

四、什么情况使用vuex

        中大型单页面应用（登录、购物车、tab选项卡）

        vuex中的状态，类似全局变量，刷新就会变成初始值。如果你想保存值得话，就要结合sessionStorage或localStorage。

问：sessionStorage 与vuex的区别

        最重要的区别：vuex存储在内存，sessionStorage则以文件的方式存储在本地。

        应用场景：vuex用于组件之间的传值，sessionStorage则主要用于不同页面之间的传值。

        永久性：当刷新页面时vuex存储的值会丢失，sessionStorage不会。

        注：很多同学觉得用sessionStorage可以代替vuex，对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组〉时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，sessionStorage无法做到，原因就是区别。

五、总结

1、创建store，并暴露 

new Vuex.Store({
    state:{},
    actions:{},
    mutations:{},
    getters:{}
})

2、main.js中引入store

        import 导入

        store对象注入到Vue实例中

3、使用vuex中的状态或actions

        方法一：

//组件内，获取状态和行为
import {mapGetters, mapActions} from 'vuex'

// mapGetters 写在computed 
// mapActions 写在methods

        方法二：

this.$store.state  // 获取状态（不推荐）

this.$store.dispatch('行为名称');  // 调用行为