vuex

一、作用

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

二、结构

• State
  • state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。
• Getter
  • getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算
• Mutation
  • 更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
• Action
  • action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要调用这个action，则需要执行store.dispatch
• Module
  • module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。

三、State

• 为了便于日后的维护，在src里新建一个store文件夹，在里面新建一个index.js

    //store--index.js
    import Vue from 'vue'
    import vuex from 'vuex'
    Vue.use(vuex);
    
    export default new vuex.Store({
        state:{
            show:false
        }
    })
    //main.js
    import store from './store'
    
    new Vue({
    el: '#app',
    router,
    store,//使用store
    template: '<App/>',
    components: { App }
    })
    //调用
    $store.state.show

• mapState

    computed:{
        ...mapState([
            'count'
        ])
    }

四、Getter

• Getter接受state作为其第一个参数

    //store--index.js
    export default {
        state:{
            show:false
        },
        getters:{
            not_show(state){   //这里的state对应着上面这个state
                return !state.show;
            }
        }
    }

• Getter接受其他getter作为其第二个参数

    getters: {
        doneTodosCount: (state, getters) => {
            return getters.doneTodos.length
        }
    }

• 调用

      //调用
      $store.getters.not_show
  	  注意：$store.getters.not_show 的值是不能直接修改的，需要对应的state发生变化才能改变

• mapGetters

    import {mapGetters} from 'vuex'
    export default{
        computed:{
            ...mapGetters([
                "saleProducts"
            ])
        }
    }

五、Mutations

• 传state一个参数

    //store-index.js
    export default {
        state:{
            show:false
        },
        mutations:{
            switch_dialog(state){//这里的state对应着上面这个state
                state.show = state.show?false:true;
                //你还可以在这里执行其他的操作改变state
            }
        }
    }

• 可以向store.commit传入额外的参数，即载荷（payload）

    ===第一种方式===
    //声明
    mutations: {
        increment (state, payload) {
            state.count += payload.amount
        }
    }
    //调用
    $store.commit('increment', {
        amount: 10
    })
    
    ===第二种方式===
    //handle保持不变
    mutations: {
        increment (state, payload) {
            state.count += payload.amount
        }
    }
    //调用
    store.commit({
        type: 'increment',
        amount: 10
    })

• 调用

      //调用
      $store.commit('switch_dialog')
      //注意
      1、mutations 里的操作必须是同步的。
      2、mutations 中的方法是不分组件的 , 假如你在 dialog_store.js 文件中的定义了switch_dialog 方法 , 在其他文件中的一个 switch_dialog 方法 , 那么$store.commit('switch_dialog') 会执行所有的 switch_dialog 方法。

• 使用常量替代Mutation事件类型

    //types.js
    export const SOME_MUTATION = 'SOME_MUTATION'
    //store.js
    const store = new Vuex.Store({
        state: { ... },
        mutations: {
        // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
            [SOME_MUTATION] (state) {
            // mutate state
            }
        }
    })

• mapMutations

    export default {
    methods: {
        ...mapMutations([
            'increment', 
            'incrementBy'
            ]),
            ...mapMutations({
            add: 'increment'
            })
        }
    }

六、Action

• 使用（将异步操作放在action里）

    //store--index.js
    export default {
        state:{
            show:false
        },
        mutations:{
            switch_dialog(state){//这里的state对应着上面这个state
                state.show = state.show?false:true;
                //你还可以在这里执行其他的操作改变state
            }
        },
        actions:{
            switch_dialog(context){
                //这里的context和我们使用的$store拥有相同的对象和方法
                context.commit('switch_dialog');
                //你还可以在这里触发其他的mutations方法
            }
        }
    }

• 调用

    //正常分发
    $store.dispatch('switch_dialog')
    
    //以载荷形式分发
    store.dispatch('incrementAsync', {
        amount: 10
    })
    
    //以对象形式分发
    store.dispatch({
        type: 'incrementAsync',
        amount: 10
    })

• mapActions

    import {mapActions} from 'vuex'
    export defalut{
        methods:{
            ...mapActions([
                "reducePrice"
            ])
            ...mapActions({
            add: 'increment' 
            })
        }
    }

感谢博主启发 https://segmentfault.com/a/1190000009404727，https://segmentfault.com/a/1190000012015742