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>
  • 相关阅读:
    质因数分解
    P1939 【模板】矩阵加速(数列)
    UVALive
    Python操作MySQL:pymysql模块
    Mysql数据库基础
    Redis管道和发布订阅
    Redis常用操作
    Redis操作集合,有序集合
    Redis操作list
    Redis操作hash
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9150799.html
Copyright © 2011-2022 走看看