action

作者: 第三人称i | 来源:发表于2018-12-01 13:07 被阅读0次

    action 类似于mutations,支持任何的异步操作

    <!-- 1. 创建全局 action 实例   创建 actions.js  -->
        目录:
            store
            |-- modules
            |-- index.js
            |-- state.js
            |-- getters.js
            |-- mutations.js
            |-- actions.js 
    
    <!-- 2.actions.js  ---------------------  -->
    
    <script>
        const actions = {
            asynSetMsg(context, payload){
                context.commit('setMsg', payload);
            }
        }
        export default actions;
    </script>
    
    <!--  3.index.js  --------------------- -->
    
    <script>
        // ... 
        import actions from "./actions.js" 
        // ...
        const store =  new Vuex.Store({
            // ...
            actions               // actions => actions: actions
        })
    
        export default store;
    </script>
    
    <!-- 4.组件中使用: -->
    
    <script>
        export default {
            methods: {
                asynSetMsg(){
                    this.$store.dispatch('asynSetMsg', '通过异步修改数据');
                }
            }
        }
    </script>
    
    <!-- 5.mapActions 辅助函数 -->
    
    <script>
        import { mapActions } from "vuex";
        export default {
            methods: {
                // 第一种方法
                ...mapActions({
                    asynSetMsg: 'asynSetMsg'
                }),
                // 第二种方法
                ...mapActions([
                    'asynSetMsg'
                ]),
                modifyAsynMsg(){
                    this.asynSetMsg('通过异步修改数据');
                }
            }
        }
    </script>
    

    相关文章

      网友评论

          本文标题:action

          本文链接:https://www.haomeiwen.com/subject/einlcqtx.html