2020学习vuex

1.为什么要使用vuex？
在多个组件共享某一个状态时，单向数据流的简洁性就会被破坏，1多个视图依赖于同一个状态2来自不同视图的行为需要变更同一状态。对前者而言，传参的方法在多层嵌套的组件会变得非常繁琐，并且对于兄弟组件之间的状态传递无能为力；对后者而言，我们则是经常采用父子组件直接引用或者通过事件来变更和同步状态来多份拷贝。但这两种模式非常脆弱，对于代码维护困难，因此就产生了vuex直接将不同组件的共享状态剥离出来，以一个全局单例模式进行管理。

2.全局单例模式？
单例模式就是在系统中保存一个实例，就是一个全局变量。单例模式声明一个命名空间，它生成一个唯一的全局变量。

3.mapState用于一次性获取多个state中的数据，避免多次使用this.$store.state。这个…mapState放置在computed计算属性中。如果不想修改命名则使用数组，如果需要修改命名则使用对象。同理还有mapGetters、mapActions(放在methods)

4.mutations必须是同步函数
因为mutations是用于捕捉状态，同时修改state结果，如果此时返回一个异步函数，就会将异步函数放置函数栈中，只有当所有函数返回完毕后才会执行出栈。但这时候mutations早就不知道是谁改变了谁，更不知道该修改哪个状态。可以对mutations中的方法名进行统一设置。异步一般放于actions中

5.commit传递的方法可以一样，当中的业务逻辑不一样也没关系。module只是为了让项目更加清晰，实际上是将state,mutations,actions,getters中的方法换了个地方保存，但是调用方式不变。

6.vuex的插件
vuex-persistedstate 状态持久化
vuex-shared-mutations 同步标签页、窗口
vuex-i18n 语言本地化
vuex-loading 管理多个加载状态
vuex-cache 缓存操作
vuex允许在store中有一个plugins选项，而我们创建的plugin中接受一个store参数，然后通过调用store中的方法进行一些操作， 如在插件中提交mutations，就可以在subscribe中判断mutations的type值，然后看是否发送emit事件。
7.严格模式
在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调 试工具跟踪到。不要在发布环境下使用严格模式，相应的代码：

 strict: process.env.NODE_ENV !== 'production'

8.vuex在表单中使用双向数据绑定
方法一：给input绑定value值，同时监听@input时间

 <input type="text" :value="count" @input="inputEvent">
    ...mapState('count')
    inputEvent(e) {
        this.$store.dispatch('add2',e.target.value)
    }

方法二：直接使用v-model，但需要使用计算属性的get和set

message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }

9.vuex的热重载，需要在模块化使用，可以不需要频繁刷新，使得开发变得更加便捷，提高开发效率。本质上好像没什么用处。

if(module.hot){
    //监听这三个js文件
    module.hot.accept(['./getter.js','./actions.js','./mutations.js'],()=>{
    //数据变化了，就去热重载
    store.hotUpdate({
                //getters的值为新的getter.js文件
                getters: require('./getter.js').default,
                mutations: require('./mutations.js').default,
                actions: require('./actions.js').default
            })
        })
    }