Vuex状态管理之映射创建快捷方式的四种方法及状态管理用法！

正常我们访问Vuex全局状态变量或方法，在外边我们必须这么来访问：

html代码访问：（$store.） 对象内部（this.$store）

State正常访问方式

$store.state.num

Getter正常访问方式

$store.getters.num

Mutation正常访问方式

$store.commit('add') 

Action正常访问方式

$store.dispatch('updateNum')

 

通过对应的Map方法在computed计算属性中映射快捷键之后，访问更方便了！

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
    name: "App",

    computed: {
        ...mapState( [ "num" ] )，
        ...mapGetters( [ "getNum" ] ),
    },

    methods: {
        //Actions的推荐数组映射方式，切记：Actions支持同步和异步方法!
        ...mapActions( [ "updateNum" ] ),
        //Mutations的推荐数组映射方式，切记：Mutations仅支持同步!
        ...mapMutations( [ "add" ] ),

    }
};

 

Vuex状态管理一个完整的案例：

一定要注意：（新手很容易犯的错误）

<template>
    <div id="app">
        <p>
            <button @click="changValue()">
                点击改变num的值
            </button>
        </p>
        //所有快捷键的结果都是一样的
        <p><span>{{ my_num }} </span></p>
        <p><span>{{ my_num1 }} </span></p>
        <p><span>{{ num }} </span></p>
        <p><span>{{ num1 }} </span></p>
        <p><span>{{ getNum }} </span></p>
    </div>
</template>

 

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
    name: "App",
    //普通的数据复制拷贝，不是快捷键！比如gla改变新的指向，test是不会改变的，除非主动把test赋值多少！(程序正常逻辑)
    data() {
        return {
            tableData: [],
            dialogformvisible: false,
            test: gla

        };
    },
    //computed计算属性等价于所有映射元素的快捷键,元素值变，跟着变！
    computed: {

        /***
         * (vuex映射的四种方法)以mapState映射创建快捷方式为例！
         */
        //最原始的的全局映射方法(简化代码--知道即可)
        num1: function () {
            return this.$store.state.num;
        },
        //用vuex中的mapState来简化映射代码(方式二，添加数组--推荐方式)
        ...mapState( [ "num" ] ),
        //用vuex中的mapState来简化映射代码(方式二，添加对象属性，取别名方式--推荐)
        ...mapState( { my_num: "num" } ),
        //用vuex中的mapState来简化映射代码(方式三，添加对象函数：箭头函数别名--知道即可)
        ...mapState( {
            my_num1: state => state.num
        } ),

        ...mapGetters( [ "getNum" ] ),

    },

    methods: {
        //Actions的推荐数组映射方式，切记：Actions支持同步和异步方法!
        ...mapActions( [ "updateNum" ] ),
        //Mutations的推荐数组映射方式，切记：Mutations仅支持同步!
        ...mapMutations( [ "add" ] ),

        //vuex状态映射快捷键之后，可以当做对象内部的普通方法直接使用！
        changValue: function () {
            this.updateNum( 1 );
            this.add( 1 );
        },

    }
};

import Vue from "vue";
import Vuex from "vuex";

Vue.use( Vuex );

export default new Vuex.Store( {
    state: {
        num: 5
    },
    getters: {
        getNum: ( state ) => {

            return ( id ) => {
                return state.num + id;
            };
        },
        getNum1: ( state ) => {
            return state.num;
        }
    },
    mutations: {
        add: function ( state, n ) {
            state.num = state.num + n;
        }
    },
    actions: {
        updateNum: ( context, n ) => {
            console.log( n );
            setInterval( () => {
                context.commit( "add", n );
            }, 1000 );

        },
    }
} );