zoukankan      html  css  js  c++  java
  • vuex mapActions

    在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store).

    import Vue from 'vue';
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App';
    import router from './router';
    import Vuex from 'vuex';
    
    Vue.config.productionTip = false;
    Vue.use(Vuex);
    Vue.use(Element)
    
    //vuex的配置
    //注意Store是大写
    const store = new Vuex.Store({
        //数据保存
        state: {
            show: false,
            count: 0,
            list: [1, 5, 8, 10, 30, 50]
        },
        mutations: {
            increase(state, n = 1) {
                state.count += n;
            },
            decrease(state, n = 1) {
                state.count -= n;
            },
            switch_dialog(state) { // 这里的state对应着上面这个state
                state.show = state.show ? false : true
                // 你还可以在这里执行其他的操作改变state
            }
        },
        getters: {
            filteredList: state => {
                return state.list.filter(item => item < 31);
            }
        },
        actions: {
            asyncDecrease({commit }) {
                commit('decrease',5);
            },
            switch_dialog123(context) { // 这里的context和我们使用的$store拥有相同的对象和方法
                context.commit('switch_dialog')
                // 你还可以在这里触发其他的mutations方法
            }
        }
    });
    
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        //使用vuex
        store: store,
        render: h => h(App),
    });
    <template>
        <div>
            {{count}}
            <button @click="handleIncrease">+5</button>
            <button @click="handleDecrease">-5</button>
            <button @click="handleAsyncDecrease">异步-5</button>
            <button @click="handleRouter">跳转到 HelloWorld3</button>
            <button @click="showRouter">展示路由</button>
        </div>
    </template>
    
    <script>
        import { mapState } from 'vuex'
        import { mapGetters } from 'vuex'
        import { mapMutations } from 'vuex'
        import { mapActions } from 'vuex'
        export default {
            name: 'HelloWorld2',
            computed: {
                //            count(){
                //                return this.$store.state.count;
                //            },
                //            filteredList() {
                //                return this.$store.getters.filteredList;
                //            },
                ...mapState({
                    count: state => state.count
                }),
                // 使用对象展开运算符将 getter 混入 computed 对象中
                ...mapGetters([
                    'filteredList'
                ])
            },
            methods: {
                handleIncrease() {
                    //                this.$store.commit('increase', 5);
                    this.increase();
                },
                handleDecrease() {
                    this.$store.commit('decrease', 5);
                },
                handleAsyncDecrease() {
                    //调用方式一
                    //                this.$store.dispatch('asyncDecrease');
                    //调用方式二
                    this.asyncDecrease()
                },
                handleRouter() {
                    this.$router.push('/HelloWorld3');
                },
                showRouter() {
                    console.log(this.$router);
                    console.log(this.$router.push);
                },
                //mapMutations 使用方法一
                //            ...mapMutations([
                //                'increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
                //            ]),
                //mapMutations 使用方法二
                ...mapMutations({
                    increase: 'increase' // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
                }),
                //mapActions 使用方法一
                //            ...mapActions([
                //                'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
                //            ]),
                //mapActions 使用方法二
                ...mapActions({
                    asyncDecrease: 'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
                }),
            }
        };
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
  • 相关阅读:
    在定义SharePoint列表的SPD数据视图的时候需要注意的问题
    如何自定义改变SharePoint 中列表Web部件中所有行某列中的固定值为图片或其它HTML代码
    [C#3] 1扩展方法
    特效编辑器开发手记2——cocos2dx粒子系统的plist文件 深圳
    让人死去活来的cocos2dx安卓开发环境搭建(windows+eclipse+ndk 不用cygwin)【上图】 深圳
    《疾风》开发手记:NxOgre最新版本的搭建20111020 深圳
    Linux 操作系统下CPU多核心的绑定 深圳
    巧用Unix时间戳 深圳
    AS3加载AS2的swf文件报错 深圳
    GLUT函数说明(转载) 深圳
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9150799.html
Copyright © 2011-2022 走看看