vuex

个人的一些理解
1.如果搭建时未自动创建store.js文件则先新建一个
2.总共分为4块（在全局注册的情况下：）：
state（保存数据，相当于单文件中的data）
    state: {
        count: 0,
        isShow: true
    } 
    页面中使用：
    1.this.$store.state.count/isShow
    2.通用较方便的写法：
    import { mapState } from 'vuex'
    computed： {
        ...mapState(['count', 'isShow']), // 用数组形式
        ...mapState({ // 用对象形式
            count: state => state.count,
            isShow: state => state.isShow
        })
    } 
    然后在template就可以直接用count/isShow
mutations（相当于methods里面的事件，同步处理）
    mutations: {
        addCount(state, val) {
            state.count += val
        },
        reduceCount(state, val) {
            state.count -= val
        },
        show(state) {
            state.isShow = true
        },
        hide(state) {
            state.isShow = false
        }
    },
    页面中使用：
    1.this.$store.commit('addCount/reduceCount/show/hide')
    这些事件一般通过template上的事件来触发，eg: 
        methods: {
            addCount() {
                this.$store.commit('show') // 不传参数过去
                this.$store.commit('addCount', 1) // 需要传参
            }
        }
    2.通用较方便的写法：
        import { mapMutations } from 'vuex'
        methods: {
            ...mapMutations(['addCount', 'reduceCount', 'show', 'hide']) // 需要用到什么方法就写到里面，对应的方法可在template也可在methods里面
                                                                         // 而这些方法需要传参则如同平时写vue一样
                                                                         // eg: <button @click="addCount(sth)">+</button> // 注意：如果这个事件名跟store里面不一样则用
                                                                         ...mapMutations({
                                                                            reduces: 'reduce' // 映射 $this.reduces 为 this.store.commit('reduce')， 也就是此处key为组件中的事件名，value为store里面的事件名
                                                                        })
                                                                         //     data () {
                                                                                    return {
                                                                                        sth: 33
                                                                                    }
                                                                                }, // 这样就能正常传参了
        }
getters （还是相当于事件，相当于computed，只是他是只对数据再处理，然后在return 结果）
    getters: {
        getCount: function(state){
            return state.count++
        }
    }
    页面中使用： 
    1.this.$store.getters.getCount
    2.通用较方便的写法：
        import { mapGetters } from 'vuex'
     ...mapGetters([
        'getCount',
    ])
actions （异步处理，提交的是mutations里面的方法，当然也可以对state的数据重新处理）
    actions: {
        getaddCount(context, val) {
        context.commit('addCount', val)
        },
        getreduceCount(context, val) {
        context.commit('reduceCount', val)
        },
        getshow(context) {
        context.ChangeShowCom = true
        },
        gethide(context) {
        context.ChangeShowCom = false
        },
    }
    页面中使用：
    1.this.$store.commit('addCount/reduceCount/show/hide')
    这些事件一般通过template上的事件来触发，eg: 
        methods: {
            add() {
                this.$store.dispatch('show') // 不传参数过去
                this.$store.dispatch('getaddCount', 1) // 需要传参
            }
        }
    2.常用较方便的写法(与mapMutations的用法一样，一般依旧写在methods，但其实只要触发这事件都行，mapMutation同样)：
    import { mapActions } from 'vuex'
    ...mapActions({
      add: 'add(store中你要用的方法的名字)' // 将 `this.add()` 映射为 `this.$store.dispatch('add')`
    })
    //add是我们自己定义的事件名称，increment是action的事件类型。当我们自己定义的事件名称与action的事件类型相同,可写成这样：
    ...mapActions(["add"])
    }