Vuex的使用经验

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。如果你需要构建一个中大型单页应用，Vuex将成为一个很好的选择。

在中大型单页应用项目中使用Vuex，store文件常用的两种方式：

第一种是按照官网核心概念分类的方式；第二种以模块管理的方式。

第一种方式的目录：

index.js的写法：

以下demo是第二种采用模块管理的方式。

store的目录是以下方式： 

在index.js文件中引入modules里面文件

以user.js为例，常用的两种写法：

第一种，store使用(state，mutations,actions)的写法：

const user {
    state: {
        user: sessionStorage.getItem('user') || {}
    },
    mutations: {
        SET_USER(state, user) {
            state.user = user
        }
    },
    actions: {
        // 第一种写法
        setUser({commit}, user) {
            commit('SET_USER', user)
            sessionStorage.setItem('user', user)
        }
        // 第二种写法
        setUser(ctx, user) {
            ctx.commit('SET_USER', user);
            sessionStorage.setItem('user', user)
        }
    }
}

export default user;

.vue文件调用：通过vuex的mapActions的使用方法及获取值常用的两种方式：

import { mapState, mapActions } from 'vuex';

export default {
    data() {
        return {}
    },
    // 第一种写法
    computed: {
        user() {
            return this.$store.state.user.user;
        }
    },
    // 第二种写法
    computed: mapState({
        user: state => state.user.user
    }),
    methods: {
         // 第一种通过dispatch调用
        changeUserInfo(value) {
            this.$store.dispatch('setUser', value)
        }
        // 第二种通过mapActions调用
        ...mapActions(['setUser']),
        changeUserInfo(value){
            this.setUser(value)
        }
       
    }
}

第二种：store使用(state，mutations)的写法

const user = {
    state: {
        user: sessionStorage.getItem('user') || {}
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
            sessionStorage.setItem('user', user)
        }
    }
}

export default user;

.vue文件调用：通过vuex的mapActions的使用方法及获取值常用的两种方式：

import { mapState, mapMutations} from 'vuex';

export default {
    data() {
        return {}
    },
    // 第一种写法
    computed: {
        user() {
            return this.$store.state.user.user;
        }
    },
    // 第二种写法
    computed: mapState({
        user: state => state.user.user
    }),
    methods: {
        // 第一种通过commit调用
        changeUserInfo(value) {
             this.$store.commit('setUser', value)
        }
        // 第二种通过mapMutaions调用
        ...mapMutations(['setUser']),
        changeUserInfo(value){
            this.setUser(value)
        }
        
    }
}

以上代码均为日常使用总结的，如果有什么问题，还请各位评论区指教；有什么好的写法，可以评论区分享一下，谢谢。